基础库
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user