基础库

This commit is contained in:
13684185576
2025-09-13 16:57:24 +08:00
22 changed files with 1476 additions and 484 deletions

View File

@ -1,46 +1,22 @@
<template>
<div style="width: 100%" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''">
<div style="width: 100%" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''">
<!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
<el-table
ref="multipleTableRef"
:data="tableData"
@selection-change="handleSelectionChange"
:row-key="getConfiger.rowKey"
:border="getConfiger.border"
:default-expand-all="getConfiger.defaultExpandAll"
:stripe="getConfiger.stripe"
:height="tableHeight"
v-loading="tableConfiger.loading"
:lazy="getConfiger.lazy"
:load="load"
:tree-props="treePros"
style="width: 100%"
:header-cell-class-name="() => 'HeadBgColor'"
<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
:row-key="getConfiger.rowKey" :border="getConfiger.border" :default-expand-all="getConfiger.defaultExpandAll"
:stripe="getConfiger.stripe" :height="tableHeight" v-loading="tableConfiger.loading" :lazy="getConfiger.lazy"
:load="load" :tree-props="treePros" style="width: 100%" :header-cell-class-name="() => 'HeadBgColor'"
:highlight-current-row="getConfiger.showSelectType === 'radio'"
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px'}"
>
<el-table-column style="width: 55px" type="selection" width="55" v-if="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''" />
<el-table-column
type="index"
label="序号"
v-if="getConfiger.showIndex"
width="60"
:align="getConfiger?.align"
/>
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px' }">
<el-table-column style="width: 55px" type="selection" width="55"
v-if="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''" />
<el-table-column type="index" label="序号" v-if="getConfiger.showIndex" width="60" :align="getConfiger?.align" />
<el-table-column
v-for="(item, index) in tableColumn"
:align="getConfiger?.align"
:prop="item.prop"
:key="index"
:label="item.label"
:width="item.width"
style="width: 100%; font-size: 14px"
:show-overflow-tooltip="item.showOverflowTooltip || false"
:sortable="item.sortable || false"
>
<el-table-column v-for="(item, index) in tableColumn" :align="getConfiger?.align" :prop="item.prop" :key="index"
:label="item.label" :width="item.width" style="width: 100%; font-size: 14px"
:show-overflow-tooltip="item.showOverflowTooltip || false" :sortable="item.sortable || false">
<!-- 使用自定义 -->
<template v-if="item.showSolt" #default="scope">
<slot :name="item.prop" v-bind="scope"></slot>
</template>
<!-- 默认 -->
@ -48,15 +24,10 @@
{{ row[item.prop] }}
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column
v-if="getConfiger.haveControls"
:fixed="fixed"
:label="getConfiger.controls"
:width="controlsWidth"
:align="getConfiger?.align"
>
<el-table-column v-if="getConfiger.haveControls" :fixed="fixed" :label="getConfiger.controls"
:width="controlsWidth" :align="getConfiger?.align">
<template #default="scope">
<slot name="controls" v-bind="scope"></slot>
</template>
@ -70,7 +41,7 @@ import { nextTick, onMounted, reactive, ref, watch, watchEffect } from "vue";
const props = defineProps({
tableConfiger: {
type: Object,
default: () => {}
default: () => { }
},
tableData: {
type: Array,
@ -131,12 +102,12 @@ onMounted(() => {
});
// 可选的时候选择的数据
const handleSelectionChange = (val) => {
if(getConfiger.showSelectType === 'radio' && val.length > 1){
if (getConfiger.showSelectType === 'radio' && val.length > 1) {
let del_row = val.shift();
multipleTableRef.value.toggleRowSelection(del_row, false);
currentRow.value = val;
emit("chooseData", val);
}else{
} else {
emit("chooseData", val);
}
};
@ -164,29 +135,27 @@ const load = (date, treeNode, resolve) => {
function setDefaultChoose() {
nextTick(() => {
// 多选的默认选中
if ( props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "checkBox" ) {
if (props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "checkBox") {
props.tableData.forEach((item) => {
if ( props.tableConfiger.defaultSelectKeys.findIndex( (v) => v === item[props.tableConfiger.rowKey] ) > -1) {
if (props.tableConfiger.defaultSelectKeys.findIndex((v) => v === item[props.tableConfiger.rowKey]) > -1) {
multipleTableRef.value.toggleRowSelection(item, true);
}
});
// 单选的默认选中
} else if ( props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio" ) {
} else if (props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio") {
getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
}
});
}
</script>
<style lang = "scss">
</style>
<style lang="scss"></style>
<style>
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>

View File

@ -1,87 +1,42 @@
<template>
<el-dialog
:title="titleValue"
width="1500px"
:model-value="modelValue"
append-to-body
@close="closed"
>
<el-dialog :title="titleValue" width="1500px" :model-value="modelValue" append-to-body @close="closed">
<div class="table_class">
<div style="width: 48%">
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
<el-tab-pane
v-for="tab in tabs"
:key="tab.dm"
:label="tab.label"
:name="tab.dm"
>
<el-tab-pane v-for="tab in tabs" :key="tab.dm" :label="tab.label" :name="tab.dm">
<!-- 添加 v-if 条件 -->
<template v-if="activeTab !== '03'">
<el-button
v-for="(it, idx) in props.dic.D_GS_BQ_LB"
:key="idx"
:type="type == it.zdmc ? 'success' : ''"
@click="chooseListType(it.zdmc)"
>
<el-button v-for="(it, idx) in props.dic.D_GS_BQ_LB" :key="idx" :type="type == it.zdmc ? 'success' : ''"
@click="chooseListType(it.zdmc)">
<span style="vertical-align: middle">{{ it.zdmc }}</span>
</el-button>
</template>
<el-table
v-loading="loading"
ref="multipleUserRef"
@selection-change="handleSelectionChange"
:data="tableData"
border
:row-key="keyid"
style="width: 100%"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
/>
<el-table v-loading="loading" ref="multipleUserRef" @selection-change="handleSelectionChange"
:data="tableData" border :row-key="keyid" style="width: 100%">
<el-table-column type="selection" width="55" :reserve-selection="true" />
<el-table-column prop="bqMc" align="center" label="标签名称" />
<el-table-column prop="bqDm" align="center" label="标签代码" />
<el-table-column prop="bqZl" align="center" label="标签种类">
<template #default="{ row }">
<DictTag
:value="row.bqZl"
:tag="false"
:options="props.dic.D_GS_BQ_ZL"
/>
<DictTag :value="row.bqZl" :tag="false" :options="props.dic.D_GS_BQ_ZL" />
</template>
</el-table-column>
<el-table-column prop="bqLx" align="center" label="标签类型">
<template #default="{ row }">
<DictTag
:value="row.bqLx"
:tag="false"
:options="props.dic.D_GS_BQ_LX"
/>
<DictTag :value="row.bqLx" :tag="false" :options="props.dic.D_GS_BQ_LX" />
</template>
</el-table-column>
<el-table-column prop="bqLb" align="center" label="标签类别">
<template #default="{ row }">
<DictTag
:value="row.bqLb"
:tag="false"
:options="props.dic.D_GS_BQ_LB"
/>
<DictTag :value="row.bqLb" :tag="false" :options="props.dic.D_GS_BQ_LB" />
</template>
</el-table-column>
</el-table>
<div class="fenye">
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="listQuery.current" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.size"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>
</el-tab-pane>
</el-tabs>
@ -89,63 +44,36 @@
<div style="width: 48%">
<div class="selected-tabBox">
<el-table
:data="selectedData"
border
:row-key="keyid"
style="width: 100%"
>
<el-table :data="selectedData" border :row-key="keyid" style="width: 100%">
<el-table-column prop="bqDm" align="center" label="标签代码" />
<el-table-column prop="bqLb" align="center" label="标签类别">
<template #default="{ row }">
<DictTag
:value="row.bqLb"
:tag="false"
:options="props.dic.D_GS_BQ_LB"
/>
<DictTag :value="row.bqLb" :tag="false" :options="props.dic.D_GS_BQ_LB" />
</template>
</el-table-column>
<el-table-column prop="bqLx" align="center" label="标签类型">
<template #default="{ row }">
<DictTag
:value="row.bqLx"
:tag="false"
:options="props.dic.D_GS_BQ_LX"
/>
<DictTag :value="row.bqLx" :tag="false" :options="props.dic.D_GS_BQ_LX" />
</template>
</el-table-column>
<el-table-column prop="bqMc" align="center" label="标签名称" />
<el-table-column prop="bqZl" align="center" label="标签种类">
<template #default="{ row }">
<DictTag
:value="row.bqZl"
:tag="false"
:options="props.dic.D_GS_BQ_ZL"
/>
<DictTag :value="row.bqZl" :tag="false" :options="props.dic.D_GS_BQ_ZL" />
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="{ row }">
<el-button
type="danger"
@click="handleRemoveFromSelectedData(row)"
>移除</el-button
>
<el-button type="danger" @click="handleRemoveFromSelectedData(row)">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="fenye">
<el-pagination
class="pagination"
@size-change="handleSizeChangeRight"
@current-change="handleCurrentChangeRight"
:current-page="listQuery.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.sizeRight"
layout="total, sizes, prev, pager, next, jumper"
:total="selectedData.length"
></el-pagination>
<el-pagination class="pagination" @size-change="handleSizeChangeRight"
@current-change="handleCurrentChangeRight" :current-page="listQuery.current" :page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.sizeRight" layout="total, sizes, prev, pager, next, jumper"
:total="selectedData.length"></el-pagination>
</div>
</div>
</div>
@ -169,7 +97,7 @@ const props = defineProps({
},
dic: {
type: Object,
default: () => {}
default: () => { }
},
bqDl: {
type: String,
@ -284,8 +212,8 @@ const getDataList = () => {
activeTab.value == "01"
? "/mosty-gsxt/tbGsxtBqgl/selectPage"
: activeTab.value == "02"
? "/mosty-gsxt/tbGsxtBqgl/selectPage"
: "/mosty-gsxt/tbGsxtBqzh/selectPage";
? "/mosty-gsxt/tbGsxtBqgl/selectPage"
: "/mosty-gsxt/tbGsxtBqzh/selectPage";
let params = {};
console.log(activeTab.value, "activeTab.value");
if (activeTab.value === "01") {
@ -393,14 +321,17 @@ defineExpose({
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
:deep(.el-dialog) {
background: #fff !important;
border-radius: 8px !important;
/* 其他样式 */
}
.table_class {
display: flex;
justify-content: space-between;