Merge branch 'master' of git.zdool.com:xs/sjkjz/web
This commit is contained in:
南思
commit
c873429f9d
|
|
@ -18,6 +18,7 @@
|
|||
"element-plus": "^2.3.5",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"jsplumb": "^2.15.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"mitt": "^3.0.0",
|
||||
"pinia": "^2.1.3",
|
||||
"sass": "^1.62.1",
|
||||
|
|
|
|||
BIN
public.zip
BIN
public.zip
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="title" :width="width" :before-close="handleClose">
|
||||
<template v-if="formType == 'slot'">
|
||||
<slot></slot>
|
||||
</template>
|
||||
<template v-if="formType == 'json'">
|
||||
<el-form ref="formRef" :model="form" :rules="formJosnRules" :label-width="formJosnLabelWidth"
|
||||
:disabled="formJosnDisabled">
|
||||
<el-row :gutter="20">
|
||||
<template v-for="item in formJosnElement">
|
||||
<el-col :span="item.cloSpan || 24">
|
||||
<el-form-item :label="item.label" :prop="item.model">
|
||||
<!-- input -->
|
||||
<el-input v-if="item.type == 'input'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
|
||||
:placeholder="item.placeholder" />
|
||||
|
||||
<!-- number -->
|
||||
<el-input-number v-if="item.type == 'number'" :disabled="Boolean(item.disabled)"
|
||||
v-model="form[item.model]" :placeholder="item.placeholder" />
|
||||
|
||||
<!-- select -->
|
||||
<el-select v-if="item.type == 'select'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
|
||||
:placeholder="item.placeholder">
|
||||
<el-option v-for="optionItem in item.options" :key="optionItem.value" :label="optionItem.label"
|
||||
:value="optionItem.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- date -->
|
||||
<el-date-picker v-if="item.type == 'date'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
|
||||
:type="item.dateType || date" :value-format="item.format || 'YYYY-MM-DD'"
|
||||
:placeholder="item.placeholder" />
|
||||
|
||||
<!-- tree-select -->
|
||||
<el-tree-select v-if="item.type == 'tree-select'" v-model="form[item.model]" :data="item.options"
|
||||
check-strictly :render-after-expand="false" :disabled="Boolean(item.disabled)" />
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="dialog-footer" v-if="!formJosnDisabled">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">
|
||||
确认
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRefs, onMounted, onBeforeMount, watch, watchEffect, computed, getCurrentInstance } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* @type {String}
|
||||
* @description 表单弹框类型 'slot' 默认为 slot | 'json' （后台接口返回就配置 json）
|
||||
*/
|
||||
formType: {
|
||||
type: String,
|
||||
default: 'slot'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '30%'
|
||||
},
|
||||
/* 以下配置在 formType 为 json 时有效 */
|
||||
// 表单校验规则
|
||||
formJosnRules: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 表单 label 宽度
|
||||
formJosnLabelWidth: {
|
||||
type: String,
|
||||
default: '120px'
|
||||
},
|
||||
// 表单元素
|
||||
formJosnElement: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
formJosnDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 表单校验规则
|
||||
modelValue: {}
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue', 'handleSubmit'])
|
||||
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const formRef = ref()
|
||||
const form = ref({})
|
||||
|
||||
// 取消
|
||||
const handleClose = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
// 确认
|
||||
const handleSubmit = async () => {
|
||||
if (props.formType == 'json ') {
|
||||
await formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
emit('handleSubmit', form.value)
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
emit('handleSubmit', form.value)
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
// console.log(newValue, 'newValue')
|
||||
dialogVisible.value = props.modelValue
|
||||
if (props.formType == 'json' && newValue) {
|
||||
nextTick(() => {
|
||||
ruleFormRef.value.clearValidate() // 清除表单校验信息
|
||||
formData.value = cloneDeep(props.formJsonData) // 表单赋值
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang='scss' scoped></style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<!-- 使用示例 -->
|
||||
<FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
|
||||
<template #default>
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
|
||||
</el-col>
|
||||
<el-col :span="2" class="text-center">
|
||||
<span class="text-gray-500">-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</FormDialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
/* 表单弹框 */
|
||||
const formDialog = ref(false)
|
||||
const FormDialogData = reactive({
|
||||
title: '新增', // String | 必填 | 标题
|
||||
width: '30%', // String | 默认值 30% | 弹框宽度
|
||||
formType: 'slot', // 'slot' 默认为 slot | 'json' （后台接口返回就配置 json）
|
||||
|
||||
/* ------------- */
|
||||
// 注意：以下配置为 json 时才有效
|
||||
formJosnRules: {}, // 默认为{}，表单校验规则
|
||||
formJosnLabelWidth: '120px', // 默认为 120px，表单 label 宽度
|
||||
// form 元素
|
||||
formJosnElement: [
|
||||
{
|
||||
type: 'input', // 元素类型
|
||||
cloSpan: '24', // 栅格布局所占份数 （默认24）
|
||||
disabled: false, // 元素是否禁用（默认为false）
|
||||
label: '姓名', // 元素的 label
|
||||
placeholder: '请填写姓名', // 元素的 placeholder
|
||||
model: 'name', // 元素 form 的 key
|
||||
|
||||
// options: [] // type 为 select 生效 （默认为 [] ）
|
||||
|
||||
// dateType: [] // type 为 date 生效 （默认为 date ）
|
||||
// dateValueformat: [] // type 为 date 生效 （默认为 YYYY-MM-DD ）
|
||||
},
|
||||
],
|
||||
formJosnDisabled: false, // 表单是否禁用
|
||||
formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
|
||||
})
|
||||
const handleSubmit = (formJsonValue) => {
|
||||
formDialog.value = false
|
||||
}
|
||||
const form = ref({})
|
||||
|
||||
</script>
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div class="table-body">
|
||||
<!-- 组件头部 -->
|
||||
<TableHeader :tableHeader="tableHeader" :disabledIf="disabledIf" :singleDisabledIf="singleDisabledIf"
|
||||
:tableList="tableList" @filter="filter" @handle="handleHeader" ref="TableHeaderRef" :selectData="selectData">
|
||||
<!-- 添加左侧插槽 -->
|
||||
<template v-slot:TableHeaderLeft>
|
||||
<slot :selectData="selectData" name="TableHeaderLeft" />
|
||||
</template>
|
||||
<!-- 添加右侧插槽 -->
|
||||
<template v-slot:TableHeaderRight>
|
||||
<slot :selectData="selectData" name="TableHeaderRight" />
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- 组件表格主体 -->
|
||||
<TableData :tableList="tableList" :tableData="tableData" :tableType="tableType" @changeDisabledIf="changeDisabledIf"
|
||||
@changeSingleDisabledIf="changeSingleDisabledIf" @handleSortChange="handleSortChange" ref="TableDataRef">
|
||||
<!-- 添加插槽 -->
|
||||
<template v-slot:default="{ currentCol, currentData }">
|
||||
<slot :currentCol="currentCol" :currentData="currentData" :name="currentCol.name" />
|
||||
</template>
|
||||
</TableData>
|
||||
<!-- 组件分页 -->
|
||||
<TablePagination :pagination="pagination" @handle="handlePagination" v-if="!tableType.isHiddenPagination" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import TableData from "./TableData.vue";
|
||||
import TableHeader from "./TableHeader.vue";
|
||||
import TablePagination from "./TablePagination.vue";
|
||||
|
||||
const props = defineProps({
|
||||
tableHeader: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
tableType: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
tableList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
pagination: {
|
||||
type: Object,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handleTableHeader", "handleTablePagination", "handleTableSort"]);
|
||||
|
||||
const TableHeaderRef = ref(); // TableHeaderRef 的 ref
|
||||
const TableDataRef = ref(); // TableData 的 ref
|
||||
|
||||
// 控制按钮是否禁用
|
||||
const disabledIf = ref(true);
|
||||
const singleDisabledIf = ref(true);
|
||||
// 修改 disabledIf 方法
|
||||
const changeDisabledIf = (val) => {
|
||||
disabledIf.value = val;
|
||||
};
|
||||
const changeSingleDisabledIf = (val) => {
|
||||
singleDisabledIf.value = val;
|
||||
};
|
||||
|
||||
// 表格筛选显示方法
|
||||
const filter = (checkList) => {
|
||||
props.tableList.map((item) => {
|
||||
if (checkList.indexOf(item.name) != -1) {
|
||||
item.show = true;
|
||||
} else {
|
||||
item.show = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表格顶部事件
|
||||
const handleHeader = (type, data) => {
|
||||
if (type === "search") return emit("handleTableHeader", { type, data });
|
||||
if (type === "mixInput") return emit("handleTableHeader", { type, data });
|
||||
if (type === "sort") return emit("handleTableHeader", { type, data });
|
||||
emit("handleTableHeader", { type, data: TableDataRef.value.selectData });
|
||||
};
|
||||
|
||||
// 表格分页
|
||||
const handlePagination = (current) => {
|
||||
emit("handleTablePagination", current);
|
||||
};
|
||||
|
||||
// 表格自定义筛选
|
||||
const handleSortChange = (column, prop, order) => {
|
||||
emit("handleTableSort", column, prop, order)
|
||||
}
|
||||
|
||||
// 选中的值
|
||||
const selectData = ref([]);
|
||||
onMounted(() => {
|
||||
watch(
|
||||
() => TableDataRef.value.selectData,
|
||||
(newValue) => {
|
||||
selectData.value = newValue;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
});
|
||||
|
||||
// 清空混合搜索值
|
||||
const clearMixInput = () => {
|
||||
TableHeaderRef.value.clearMixInput()
|
||||
}
|
||||
// 清空搜索值
|
||||
const clearSearch = () => {
|
||||
TableHeaderRef.value.clearSearch()
|
||||
}
|
||||
defineExpose({
|
||||
clearMixInput,
|
||||
clearSearch
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "./table-body.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="table-data">
|
||||
<el-table :data="tableData" ref="multipleTableRef" style="width: 100%" :height="tableHeight"
|
||||
v-loading="tableType.tableLoading" :row-class-name="rowClass" :row-key="tableType.tableTree ? 'id' : undefined"
|
||||
:tree-props="{ children: tableType.tableTreeName ? tableType.tableTreeName : 'children' }"
|
||||
:header-cell-style="{ background: '#eef1f6', color: '#606266' }" @row-click="handleCurrentChange"
|
||||
@selection-change="handleSelectionChange" @sort-change="handleSortChange"
|
||||
:default-expand-all="tableType.isExpand ? tableType.isExpand : false" :border="false"
|
||||
:class="{ 'is-border': true }">
|
||||
<el-table-column type="index" width="80" align="center" label="序号" v-if="tableType.tableIndex" />
|
||||
<el-table-column type="selection" width="55" v-if="tableType.selection" />
|
||||
<template v-for="item in tableList">
|
||||
<template v-if="item.show">
|
||||
<el-table-column v-if="item.type === 'slot'" :width="item.width" :label="item.label" :sortable="item.sortable"
|
||||
:sort-method="item.sortableMethod" :prop="item.name">
|
||||
<template #default="scope">
|
||||
<slot :currentCol="item" :currentData="scope.row[item.name]"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :prop="item.name" :label="item.label" :width="item.width" :sortable="item.sortable"
|
||||
:sort-method="item.sortableMethod" v-else />
|
||||
</template>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, watch, computed } from 'vue'
|
||||
import { ElTable } from 'element-plus'
|
||||
const props = defineProps({
|
||||
tableList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
tableType: {
|
||||
type: Object,
|
||||
default: () => { return {} }
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changeDisabledIf', 'changeSingleDisabledIf', 'handleSortChange'])
|
||||
|
||||
// 表格 ref
|
||||
const multipleTableRef = ref()
|
||||
|
||||
/* 表格高度 */
|
||||
const tableHeight = ref(0)
|
||||
const changeHeight = ref(220)
|
||||
nextTick(() => {
|
||||
if (props.tableType.changeHeight) {
|
||||
changeHeight.value = props.tableType.changeHeight
|
||||
}
|
||||
tableHeight.value = window.innerHeight - changeHeight.value
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
tableHeight.value = window.innerHeight - changeHeight.value
|
||||
})
|
||||
})
|
||||
|
||||
/* 表格选择 */
|
||||
const selectData = ref([]) // 选中行的数据
|
||||
// 勾选数据行的 Checkbox 时触发的 rowClass
|
||||
const rowClass = computed(() => {
|
||||
return ({ row }) => {
|
||||
if (selectData.value.includes(row)) {
|
||||
return 'slecleRowColor ';
|
||||
}
|
||||
}
|
||||
})
|
||||
// 当选择项发生变化时会触发该事件
|
||||
const handleSelectionChange = (rows) => {
|
||||
selectData.value = rows
|
||||
}
|
||||
|
||||
// 监听多选的选择状态、数据
|
||||
watch(selectData, (data) => {
|
||||
emit('changeDisabledIf', !(data.length > 0))
|
||||
emit('changeSingleDisabledIf', !(data.length == 1))
|
||||
}, { deep: true })
|
||||
|
||||
// 单行点击触发
|
||||
const handleCurrentChange = (row) => {
|
||||
if (props.tableType.selection) {
|
||||
if (selectData.value.indexOf(row) > -1) {
|
||||
selectData.value.splice(selectData.value.indexOf(row), 1)
|
||||
multipleTableRef.value.toggleRowSelection(row, false)
|
||||
} else {
|
||||
selectData.value.push(row)
|
||||
multipleTableRef.value.toggleRowSelection(row, true)
|
||||
}
|
||||
} else {
|
||||
selectData.value[0] = row
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 表格单选时，当数据发生变化时清空 selectData 数据
|
||||
watch(() => props.tableData, () => {
|
||||
if (!props.tableType.selection) {
|
||||
selectData.value = []
|
||||
}
|
||||
})
|
||||
|
||||
// 表格排序
|
||||
const handleSortChange = ({ column, prop, order }) => {
|
||||
emit('handleSortChange', column, prop, order)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
selectData
|
||||
})
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
// table 选中高亮
|
||||
.el-table :deep(.slecleRowColor) td {
|
||||
background: #ecf5ff !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<el-scrollbar>
|
||||
<div class="table-header">
|
||||
<div class="table-header-left">
|
||||
<template v-for="(item, index) in tableHeader[0].buttons">
|
||||
<el-button v-permission="tableHeader[2]?.create" type="primary" icon="Plus" v-if="item === 'create'"
|
||||
@click="emit('handle', 'create')" :key="index">新增</el-button>
|
||||
<el-button type="primary" icon="Edit" :disabled="singleDisabledIf" v-if="item === 'edit'"
|
||||
v-permission="tableHeader[2]?.edit" @click="emit('handle', 'edit')" :key="index">编辑</el-button>
|
||||
<span v-if="item === 'delete'" v-permission="tableHeader[2]?.delete">
|
||||
<el-popconfirm title="是否删除?" v-if="item === 'delete'" @confirm="emit('handle', 'delete')" :key="index">
|
||||
<template #reference>
|
||||
<el-button type="primary" icon="Delete" :disabled="disabledIf">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</span>
|
||||
<template v-if="Object.prototype.toString.call(item) === '[object Object]'">
|
||||
<el-button type="primary" :disabled="customDisabled(item)" :icon="item.icon" v-permission="item.permission"
|
||||
@click="emit('handle', item.name)" v-if="item.type === 'custom'" :key="index">{{ item.title }}</el-button>
|
||||
<span v-if="item.type === 'popconfirm'" v-permission="item.permission">
|
||||
<el-popconfirm :title="`是否${item.title}`" @confirm="emit('handle', item.name)" :key="index">
|
||||
<template #reference>
|
||||
<el-button type="primary" :icon="item.icon" :disabled="customDisabled(item)">{{ item.title
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 添加左侧插槽 -->
|
||||
<slot name="TableHeaderLeft" />
|
||||
</div>
|
||||
<div class="table-header-right">
|
||||
<template v-for="(item, index) in tableHeader[1].buttons">
|
||||
<el-input class="search-input" v-model="searchInput" v-if="item === 'search'" placeholder="搜索"
|
||||
@keyup.enter="handleSearch" clearable :key="index" @clear="handleSearch"
|
||||
v-permission="tableHeader[2]?.search">
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="handleSearch" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button type="primary" icon="Filter" @click="emit('handle', 'advanced')" v-if="item === 'advanced'"
|
||||
v-permission="tableHeader[2]?.advanced" :key="index">高级筛选</el-button>
|
||||
<el-button type="primary" icon="Refresh" @click="emit('handle', 'refresh')" v-if="item === 'refresh'"
|
||||
:key="index" v-permission="tableHeader[2]?.refresh" />
|
||||
<span v-if="item === 'bulkDelete'" v-permission="tableHeader[2]?.bulkDelete">
|
||||
<el-popconfirm title="是否删除?" v-if="item === 'bulkDelete'" @confirm="emit('handle', 'bulkDelete')"
|
||||
:key="index">
|
||||
<template #reference>
|
||||
<el-button type="primary" icon="Delete" :disabled="disabledIf">批量删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</span>
|
||||
<el-dropdown v-if="item === 'filter'" :key="index" v-permission="tableHeader[2]?.filter">
|
||||
<el-button type="success" icon="Filter" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-checkbox-group class="ydool_filter" v-model="checkList">
|
||||
<el-checkbox v-for="item in tableList" :label="item.name">
|
||||
{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<template v-if="Object.prototype.toString.call(item) === '[object Object]'">
|
||||
<el-input class="mix-input" v-model="seachMixInput" v-permission="item.permission"
|
||||
v-if="item.name === 'mixInput'" clearable placeholder="输入搜索内容" @keyup.enter="handleMixSearch"
|
||||
@clear="handleMixSearch">
|
||||
<template #prepend>
|
||||
<el-select v-model="seachMixSelect" placeholder="请选择" style="width: 110px" clearable>
|
||||
<el-option v-for="option, index in item.options" :label="option.label" :value="option.value"
|
||||
:key="index" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="handleMixSearch" />
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="table-header-right-sort" v-if="item.name === 'sort'" v-permission="item.permission">
|
||||
<el-select v-model="sortSearch" class="thrs-search" clearable
|
||||
@change="emit('handle', 'sort', { sortType: sortActive, 'name': sortSearch })">
|
||||
<template #prefix>
|
||||
<img src="@/assets/images/sort-icon.png" alt="" class="thrs-img">
|
||||
</template>
|
||||
<el-option-group v-for="i in ['排序']" :key="i" :label="i">
|
||||
<el-option v-for="k in item.options" :key="k.value" :label="k.label" :value="k.value" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<div class="arrow-filter" @click="changeOrderSearch">
|
||||
<i class="arrow-top" :class="sortActive === 'asc' ? 'arrow-active' : ''"></i>
|
||||
<i class="arrow-bottom" :class="sortActive === 'desc' ? 'arrow-active' : ''"></i>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" :disabled="customDisabled(item)" v-permission="item.permission" :icon="item.icon"
|
||||
@click="emit('handle', item.name)" v-if="item.type === 'custom'" :key="index">{{ item.title }}</el-button>
|
||||
|
||||
<span v-if="item.type === 'popconfirm'" v-permission="item.permission">
|
||||
<el-popconfirm :title="`是否${item.title}`" @confirm="emit('handle', item.name)" :key="index">
|
||||
<template #reference>
|
||||
<el-button type="primary" :icon="item.icon" :disabled="customDisabled(item)">{{ item.title
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 添加右侧插槽 -->
|
||||
<slot name="TableHeaderRight" />
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { Download, Plus, Coordinate, Delete, Printer, Notification, Search } from '@element-plus/icons-vue'
|
||||
const props = defineProps({
|
||||
disabledIf: {
|
||||
type: Boolean
|
||||
},
|
||||
singleDisabledIf: {
|
||||
type: Boolean
|
||||
},
|
||||
tableList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
tableHeader: Object,
|
||||
selectData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['filter', 'handle'])
|
||||
|
||||
// 搜索
|
||||
const searchInput = ref('')
|
||||
// 搜索触发事件
|
||||
const handleSearch = () => {
|
||||
emit('handle', 'search', searchInput)
|
||||
}
|
||||
// 清空搜索值
|
||||
const clearSearch = () => {
|
||||
searchInput.value = ''
|
||||
}
|
||||
|
||||
// 混合搜索
|
||||
const seachMixInput = ref('')
|
||||
const seachMixSelect = ref('')
|
||||
// 搜索触发事件
|
||||
const handleMixSearch = () => {
|
||||
emit('handle', 'mixInput', { seachMixSelect, seachMixInput })
|
||||
}
|
||||
// 清空混合搜索值
|
||||
const clearMixInput = () => {
|
||||
seachMixInput.value = ''
|
||||
seachMixSelect.value = ''
|
||||
}
|
||||
// 表格筛选显示
|
||||
const checkList = ref()
|
||||
checkList.value = props.tableList.map(item => {
|
||||
return item.name
|
||||
})
|
||||
|
||||
// watch(() => props.tableList, () => {
|
||||
// checkList.value = props.tableList.map(item => {
|
||||
// return item.name
|
||||
// })
|
||||
// }, { deep: true, immediate: true })
|
||||
|
||||
watch(checkList, (newValue) => {
|
||||
emit('filter', newValue)
|
||||
})
|
||||
|
||||
// 自定义按钮的禁用
|
||||
const customDisabled = computed(() => {
|
||||
return (item) => {
|
||||
if (!item.isOpen) return false
|
||||
if (item.isOpen) {
|
||||
let obj = {
|
||||
custom: () => item.disabled,
|
||||
single: () => props.singleDisabledIf,
|
||||
Arbitrary: () => props.disabledIf
|
||||
}
|
||||
if (item.isOpen === 'custom' && typeof item.disabled == 'function') {
|
||||
return obj[item.isOpen]()(props.selectData)
|
||||
}
|
||||
return obj[item.isOpen]()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 表格排序
|
||||
const sortSearch = ref('')
|
||||
const sortActive = ref('asc')
|
||||
const changeOrderSearch = () => {
|
||||
if (sortActive.value === 'asc') { sortActive.value = 'desc' } else { sortActive.value = 'asc' }
|
||||
emit('handle', 'sort', { sortType: sortActive.value, 'name': sortSearch.value })
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
clearMixInput,
|
||||
clearSearch
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div class="table-pagination">
|
||||
<el-pagination class="ydool_pagination" :page-size="pagination.pageSize" hide-on-single-page
|
||||
layout="->,total, prev, pager, next, jumper" :total="pagination.total" @current-change="handle"
|
||||
:background="background" small />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { ref, watch, computed } from 'vue'
|
||||
const props = defineProps({
|
||||
pagination: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
})
|
||||
const background = ref(true)
|
||||
const emit = defineEmits(['handle'])
|
||||
|
||||
const handle = (current) => {
|
||||
emit('handle', current)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
<template><!-- 使用示例 -->
|
||||
<div class="example">
|
||||
<TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
|
||||
@handleTableSort="handleTableSort" ref="TableBodyRef">
|
||||
|
||||
<!-- 左侧顶部插槽 -->
|
||||
<template #TableHeaderLeft="{ selectData }">
|
||||
<el-button @click="handleSlot(selectData)">插槽</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 右侧顶部插槽 -->
|
||||
<template #TableHeaderRight="{ selectData }">
|
||||
<el-button @click="handleSlot(selectData)">插槽</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 表格插槽使用 -->
|
||||
<template #slotName="{ currentCol, currentData }">
|
||||
<span style="color: #729880">{{ currentData }}</span>
|
||||
</template>
|
||||
</TableBody>
|
||||
|
||||
<!-- 更多弹框 -->
|
||||
<el-dialog v-model="moreConditionsIf" title="搜索更多">
|
||||
<el-form :model="moreConditionsForm">
|
||||
<el-form-item label="企业名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="moreConditionsForm.name" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="公司地址" :label-width="formLabelWidth">
|
||||
<el-input v-model="moreConditionsForm.name" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="closeDialog">
|
||||
搜索
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import TableBody from '@/components/TableBody/TableBody.vue'
|
||||
|
||||
const TableBodyRef = ref()
|
||||
const data = reactive({
|
||||
/**
|
||||
* @type {Object}
|
||||
* @description 表格头部
|
||||
*/
|
||||
tableHeader: [
|
||||
{
|
||||
buttons: ["create", "edit", 'delete', {
|
||||
type: 'custom', // // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: 'customButton', // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||
title: '自定义', // 按钮名称
|
||||
icon: 'Message', // 自定义左侧按钮 （ 目前只支持 element 的 icon ）
|
||||
// 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
|
||||
// 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
|
||||
isOpen: 'custom',
|
||||
// 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
|
||||
// disabled: false,
|
||||
disabled: (selectData) => {
|
||||
console.log(selectData, 'selectData121341')
|
||||
if (selectData[0]?.id === 3) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
permission: undefined // 按钮权限，不设置，或设置为 undefined、false 默认显示
|
||||
}],
|
||||
|
||||
},
|
||||
{
|
||||
buttons: ["search", "advanced", "refresh", 'filter', 'bulkDelete',
|
||||
{
|
||||
name: 'mixInput', // 混合筛选
|
||||
options: [{ label: 1, value: 1 }, { label: 1, value: 1 }],
|
||||
// permission: false, // 权限
|
||||
},
|
||||
{
|
||||
name: 'sort', // 排序
|
||||
options: [{ label: '按企业名称', value: 1 }, { label: '按姓名', value: 2 }],
|
||||
// permission: false, // 权限
|
||||
},
|
||||
{
|
||||
type: 'custom', // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: 'customButton', // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||
title: '自定义', // 按钮名称
|
||||
icon: 'Message', // 自定义左侧按钮 （ 目前只支持 element 的 icon ）
|
||||
// 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
|
||||
// 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
|
||||
isOpen: 'custom',
|
||||
// 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
|
||||
disabled: false,
|
||||
// permission: false, // 权限
|
||||
}]
|
||||
},
|
||||
// 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
|
||||
// 不设置，或设置为 undefined、false 默认显示
|
||||
{
|
||||
create: undefined,
|
||||
edit: false,
|
||||
delete: false,
|
||||
search: false,
|
||||
advanced: false,
|
||||
refresh: false,
|
||||
bulkDelete: false,
|
||||
filter: false,
|
||||
}
|
||||
],
|
||||
/**
|
||||
* @type {Array}
|
||||
* @description 表格参数
|
||||
*/
|
||||
tableType: {
|
||||
selection: false, // Boolean 是否多选
|
||||
tableLoading: false, // Boolean 表格 loading
|
||||
tableIndex: true, // Boolean 是否序号
|
||||
tableTree: true, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
|
||||
tableTreeName: 'children', // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
|
||||
isExpand: true, // Boolean 是否默认展开（默认为 false）
|
||||
isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
|
||||
changeHeight: false, // String / Number 表格高度（ 默认为 false，自动设置根据窗口设置高度）
|
||||
},
|
||||
/**
|
||||
* @type {Array}
|
||||
* @description 表格配置
|
||||
*/
|
||||
tableList: [
|
||||
{
|
||||
type: 'slot', // 设置为 slot 即可使用插槽
|
||||
name: 'slotName', // name 是作用域插槽的名字
|
||||
label: '插槽',
|
||||
show: true, // 是否显示
|
||||
sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
|
||||
// 排序方法，使用示例 （仅当 sortable 设置为 true 时生效）
|
||||
sortableMethod: (a, b) => {
|
||||
console.log(a.date);
|
||||
// a 和 b 就是表格数据 (a 是第后一条，b 是前一条)
|
||||
// 如果返回值小于 0 那么 a 排在前 b 在之前，等于 0 位置不变， 大于 0 那么 a 排在 b 之后
|
||||
return new Date(a.date).getTime() - new Date(b.date).getTime()
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
name: 'date',
|
||||
label: '时间',
|
||||
show: true,
|
||||
sortable: 'custom',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: '姓名',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'state',
|
||||
label: '状态',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'city',
|
||||
label: '城市',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'address',
|
||||
label: '地址',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'zip',
|
||||
label: '邮编',
|
||||
show: true
|
||||
}],
|
||||
|
||||
/**
|
||||
* @type {Array}
|
||||
* @description 表格数据(模拟数据)
|
||||
*/
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036',
|
||||
slotName: '插槽',
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036',
|
||||
slotName: '插槽',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036',
|
||||
slotName: '插槽',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036',
|
||||
slotName: '插槽',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036',
|
||||
slotName: '插槽',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036',
|
||||
slotName: '插槽',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
date: '2016-05-05',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036',
|
||||
slotName: '插槽',
|
||||
}
|
||||
],
|
||||
/**
|
||||
* @type {Object}
|
||||
* @description 分页数据
|
||||
*/
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
current: 1,
|
||||
total: 0
|
||||
}
|
||||
})
|
||||
// 表格头部处理事件
|
||||
const handleTableHeader = ({ type, data }) => {
|
||||
console.log(type, data)
|
||||
switch (type) {
|
||||
case "create":
|
||||
console.log(type, data)
|
||||
break;
|
||||
case "edit":
|
||||
console.log(type, data)
|
||||
break;
|
||||
case "advanced":
|
||||
opneDialog()
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 表格分页事件
|
||||
const handleTablePagination = (current) => {
|
||||
console.log(current)
|
||||
}
|
||||
|
||||
// 表格自定义排序事件
|
||||
const handleTableSort = (column, prop, order) => {
|
||||
console.log(column, prop, order)
|
||||
}
|
||||
|
||||
// 插槽事件
|
||||
const handleSlot = (val) => {
|
||||
console.log(val)
|
||||
}
|
||||
|
||||
/* 更多弹框 */
|
||||
const formLabelWidth = ref(120)
|
||||
const moreConditionsForm = ref({
|
||||
name: ''
|
||||
})
|
||||
|
||||
const moreConditionsIf = ref(false)
|
||||
// 关闭弹框
|
||||
const closeDialog = () => {
|
||||
moreConditionsIf.value = false
|
||||
}
|
||||
// 打开弹框
|
||||
const opneDialog = () => {
|
||||
moreConditionsIf.value = true
|
||||
}
|
||||
|
||||
// 清空混合搜索
|
||||
// TableBodyRef.value.clearMixInput()
|
||||
|
||||
// 清空搜索
|
||||
// TableBodyRef.value.clearSearch()
|
||||
|
||||
</script>
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
.table-header {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.table-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> * {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> .el-button {
|
||||
padding: 8px 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
> * {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
> .el-button {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.search-input {
|
||||
flex-basis: 220px;
|
||||
min-width: 150px;
|
||||
}
|
||||
.mix-input {
|
||||
flex-basis: 320px;
|
||||
min-width: 280px;
|
||||
}
|
||||
.table-header-right-sort {
|
||||
flex-basis: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #dcdfe6;
|
||||
.thrs-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.thrs-search {
|
||||
margin-right: 0 !important;
|
||||
width: 160px !important;
|
||||
|
||||
.select-trigger .el-input .el-input__wrapper {
|
||||
box-shadow: none !important;
|
||||
|
||||
// .el-input__suffix {
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.arrow-filter {
|
||||
width: 16px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 10px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
.arrow-top {
|
||||
cursor: pointer;
|
||||
border: 5px solid transparent;
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
|
||||
&.arrow-active {
|
||||
border-bottom-color: #729880;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-bottom {
|
||||
border: 5px solid transparent;
|
||||
border-top: 5px solid #bfbfbf;
|
||||
|
||||
&.arrow-active {
|
||||
border-top-color: #729880;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ydool_filter {
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ydool_pagination {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.table-body .el-table__inner-wrapper {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
&.is-border::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -15,6 +15,8 @@ import { appComponent } from "@/scripts/dynamicComponent";
|
|||
import "@/scripts/grape-import";
|
||||
import { table } from "@/compiler/testCode";
|
||||
import http from "@/utils/request.js";
|
||||
import { permission } from "@/utils/directive.js";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
var loadDynamicComponent = false;
|
||||
|
|
@ -85,5 +87,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.directive("permission", permission);
|
||||
|
||||
app.use(ElementPlus).use(VForm3).use(createPinia()).use(router).mount("#app");
|
||||
|
|
|
|||
|
|
@ -30,6 +30,17 @@ const routes = [
|
|||
name: "home",
|
||||
meta: { title: "欢迎" },
|
||||
},
|
||||
|
||||
/**
|
||||
* 数据路由
|
||||
*/
|
||||
// 项目管理
|
||||
{
|
||||
path: "/project-manage",
|
||||
component: () => import("../views/projectManage/index.vue"),
|
||||
name: "ProjectManage",
|
||||
meta: { title: "项目管理" },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import { defineStore } from "pinia";
|
||||
import tools from "@/utils/tools";
|
||||
let user = tools.data.get("user");
|
||||
let ownPermission = user?.perms || [];
|
||||
|
||||
export const usePerms = defineStore("perms", {
|
||||
state: () => {
|
||||
return {
|
||||
perms: [...ownPermission],
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
changePerms(val) {
|
||||
this.perms = [...val];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// 全局指令
|
||||
import { usePerms } from "@/store/perms.js";
|
||||
let ownPermission = [];
|
||||
function toolPermission(el, permission) {
|
||||
ownPermission = usePerms();
|
||||
if (permission && !ownPermission.perms.includes(permission)) {
|
||||
el.parentNode && el.parentNode.removeChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
const permission = {
|
||||
mounted(el, binding) {
|
||||
toolPermission(el, binding.value);
|
||||
},
|
||||
updated(el, binding) {
|
||||
toolPermission(el, binding.value);
|
||||
},
|
||||
};
|
||||
|
||||
export { permission };
|
||||
|
|
@ -0,0 +1,367 @@
|
|||
<template>
|
||||
<div class="example">
|
||||
<TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
|
||||
@handleTableSort="handleTableSort" ref="TableBodyRef">
|
||||
<!-- 左侧顶部插槽 -->
|
||||
<template #TableHeaderLeft="{ selectData }">
|
||||
<el-button @click="handleSlot(selectData)">插槽</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 右侧顶部插槽 -->
|
||||
<template #TableHeaderRight="{ selectData }">
|
||||
<el-button @click="handleSlot(selectData)">插槽</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 表格插槽使用 -->
|
||||
<template #slotName="{ currentCol, currentData }">
|
||||
<span style="color: #729880">{{ currentData }}</span>
|
||||
</template>
|
||||
</TableBody>
|
||||
|
||||
<FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
|
||||
<template #default>
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
|
||||
</el-col>
|
||||
<el-col :span="2" class="text-center">
|
||||
<span class="text-gray-500">-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</FormDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import TableBody from "@/components/TableBody/TableBody.vue";
|
||||
import FormDialog from "@/components/FormDialog/FormDialog.vue";
|
||||
|
||||
const TableBodyRef = ref();
|
||||
const data = reactive({
|
||||
/**
|
||||
* @type {Object}
|
||||
* @description 表格头部
|
||||
*/
|
||||
tableHeader: [
|
||||
{
|
||||
buttons: [
|
||||
"create",
|
||||
"edit",
|
||||
"delete",
|
||||
{
|
||||
type: "custom", // // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||
title: "自定义", // 按钮名称
|
||||
icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon ）
|
||||
// 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
|
||||
// 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
|
||||
isOpen: "custom",
|
||||
// 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
|
||||
// disabled: false,
|
||||
disabled: (selectData) => {
|
||||
console.log(selectData, "selectData121341");
|
||||
if (selectData[0]?.id === 3) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
permission: undefined, // 按钮权限，不设置，或设置为 undefined、false 默认显示
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
buttons: [
|
||||
"search",
|
||||
"advanced",
|
||||
"refresh",
|
||||
"filter",
|
||||
"bulkDelete",
|
||||
{
|
||||
name: "mixInput", // 混合筛选
|
||||
options: [
|
||||
{ label: 1, value: 1 },
|
||||
{ label: 1, value: 1 },
|
||||
],
|
||||
// permission: false, // 权限
|
||||
},
|
||||
{
|
||||
name: "sort", // 排序
|
||||
options: [
|
||||
{ label: "按企业名称", value: 1 },
|
||||
{ label: "按姓名", value: 2 },
|
||||
],
|
||||
// permission: false, // 权限
|
||||
},
|
||||
{
|
||||
type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||
title: "自定义", // 按钮名称
|
||||
icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon ）
|
||||
// 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
|
||||
// 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
|
||||
isOpen: "custom",
|
||||
// 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
|
||||
disabled: false,
|
||||
// permission: false, // 权限
|
||||
},
|
||||
],
|
||||
},
|
||||
// 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
|
||||
// 不设置，或设置为 undefined、false 默认显示
|
||||
{
|
||||
create: undefined,
|
||||
edit: false,
|
||||
delete: false,
|
||||
search: false,
|
||||
advanced: false,
|
||||
refresh: false,
|
||||
bulkDelete: false,
|
||||
filter: false,
|
||||
},
|
||||
],
|
||||
/**
|
||||
* @type {Array}
|
||||
* @description 表格参数
|
||||
*/
|
||||
tableType: {
|
||||
selection: false, // Boolean 是否多选
|
||||
tableLoading: false, // Boolean 表格 loading
|
||||
tableIndex: true, // Boolean 是否序号
|
||||
tableTree: true, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
|
||||
tableTreeName: "children", // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
|
||||
isExpand: true, // Boolean 是否默认展开（默认为 false）
|
||||
isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
|
||||
changeHeight: false, // String / Number 表格高度（ 默认为 false，自动设置根据窗口设置高度）
|
||||
},
|
||||
/**
|
||||
* @type {Array}
|
||||
* @description 表格配置
|
||||
*/
|
||||
tableList: [
|
||||
{
|
||||
type: "slot", // 设置为 slot 即可使用插槽
|
||||
name: "slotName", // name 是作用域插槽的名字
|
||||
label: "插槽",
|
||||
show: true, // 是否显示
|
||||
sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
|
||||
// 排序方法，使用示例 （仅当 sortable 设置为 true 时生效）
|
||||
sortableMethod: (a, b) => {
|
||||
console.log(a.date);
|
||||
// a 和 b 就是表格数据 (a 是第后一条，b 是前一条)
|
||||
// 如果返回值小于 0 那么 a 排在前 b 在之前，等于 0 位置不变， 大于 0 那么 a 排在 b 之后
|
||||
return new Date(a.date).getTime() - new Date(b.date).getTime();
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
label: "时间",
|
||||
show: true,
|
||||
sortable: "custom",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
label: "姓名",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: "state",
|
||||
label: "状态",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: "city",
|
||||
label: "城市",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: "address",
|
||||
label: "地址",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: "zip",
|
||||
label: "邮编",
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
|
||||
/**
|
||||
* @type {Array}
|
||||
* @description 表格数据(模拟数据)
|
||||
*/
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
date: "2016-05-01",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "Los Angeles",
|
||||
address: "No. 189, Grove St, Los Angeles",
|
||||
zip: "CA 90036",
|
||||
slotName: "插槽",
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
date: "2016-05-01",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "Los Angeles",
|
||||
address: "No. 189, Grove St, Los Angeles",
|
||||
zip: "CA 90036",
|
||||
slotName: "插槽",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: "2016-05-01",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "Los Angeles",
|
||||
address: "No. 189, Grove St, Los Angeles",
|
||||
zip: "CA 90036",
|
||||
slotName: "插槽",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: "2016-05-02",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "Los Angeles",
|
||||
address: "No. 189, Grove St, Los Angeles",
|
||||
zip: "CA 90036",
|
||||
slotName: "插槽",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
date: "2016-05-03",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "Los Angeles",
|
||||
address: "No. 189, Grove St, Los Angeles",
|
||||
zip: "CA 90036",
|
||||
slotName: "插槽",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
date: "2016-05-04",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "Los Angeles",
|
||||
address: "No. 189, Grove St, Los Angeles",
|
||||
zip: "CA 90036",
|
||||
slotName: "插槽",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
date: "2016-05-05",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "Los Angeles",
|
||||
address: "No. 189, Grove St, Los Angeles",
|
||||
zip: "CA 90036",
|
||||
slotName: "插槽",
|
||||
},
|
||||
],
|
||||
/**
|
||||
* @type {Object}
|
||||
* @description 分页数据
|
||||
*/
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
current: 1,
|
||||
total: 0,
|
||||
},
|
||||
});
|
||||
// 表格头部处理事件
|
||||
const handleTableHeader = ({ type, data }) => {
|
||||
console.log(type, data);
|
||||
switch (type) {
|
||||
case "create":
|
||||
handleCreate();
|
||||
console.log(type, data);
|
||||
break;
|
||||
case "edit":
|
||||
console.log(type, data);
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 表格分页事件
|
||||
const handleTablePagination = (current) => {
|
||||
console.log(current);
|
||||
};
|
||||
|
||||
// 表格自定义排序事件
|
||||
const handleTableSort = (column, prop, order) => {
|
||||
console.log(column, prop, order);
|
||||
};
|
||||
|
||||
// 插槽事件
|
||||
const handleSlot = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const handleCreate = () => {
|
||||
console.log(12);
|
||||
formDialog.value = true
|
||||
};
|
||||
|
||||
// 清空混合搜索
|
||||
// TableBodyRef.value.clearMixInput()
|
||||
|
||||
// 清空搜索
|
||||
// TableBodyRef.value.clearSearch()
|
||||
|
||||
|
||||
/* 表单弹框 */
|
||||
const formDialog = ref(false)
|
||||
const FormDialogData = reactive({
|
||||
title: '新增', // String | 必填 | 标题
|
||||
width: '30%', // String | 默认值 30% | 弹框宽度
|
||||
formType: 'slot', // 'slot' 默认为 slot | 'json' （后台接口返回就配置 json）
|
||||
// 注意：以下配置为 json 时才有效
|
||||
formJosnRules: {}, // 默认为{}，表单校验规则
|
||||
formJosnLabelWidth: '120px', // 默认为 120px，表单 label 宽度
|
||||
// form 元素
|
||||
formJosnElement: [
|
||||
{
|
||||
type: 'input', // 元素类型
|
||||
cloSpan: '24', // 栅格布局所占份数 （默认24）
|
||||
disabled: false, // 元素是否禁用（默认为false）
|
||||
label: '姓名', // 元素的 label
|
||||
placeholder: '请填写姓名', // 元素的 placeholder
|
||||
model: 'name', // 元素 form 的 key
|
||||
|
||||
// options: [] // type 为 select 生效 （默认为 [] ）
|
||||
|
||||
// dateType: [] // type 为 date 生效 （默认为 date ）
|
||||
// dateValueformat: [] // type 为 date 生效 （默认为 YYYY-MM-DD ）
|
||||
},
|
||||
],
|
||||
formJosnDisabled: false, // 表单是否禁用
|
||||
formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
|
||||
})
|
||||
const handleSubmit = (formJsonValue) => {
|
||||
formDialog.value = false
|
||||
}
|
||||
const form = ref({})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -758,6 +758,11 @@ lodash-unified@^1.0.2:
|
|||
resolved "https://registry.yarnpkg.com/lodash-unified/-/lodash-unified-1.0.3.tgz#80b1eac10ed2eb02ed189f08614a29c27d07c894"
|
||||
integrity sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==
|
||||
|
||||
lodash.clonedeep@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.npmmirror.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
|
||||
integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
|
||||
|
||||
lodash@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
|
|
|
|||
Loading…
Reference in New Issue