159 lines
4.5 KiB
Smarty
159 lines
4.5 KiB
Smarty
<template>
|
||
<!-- 面包屑 -->
|
||
<el-breadcrumb>
|
||
<el-breadcrumb-item>${functionName}管理</el-breadcrumb-item>
|
||
<el-breadcrumb-item to="/${businessName}/list">${functionName}列表</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
<!-- 搜索 -->
|
||
<el-form inline :model="params">
|
||
|
||
${search}
|
||
<el-form-item>
|
||
<el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
|
||
搜索
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-space style="margin-bottom: 10px;">
|
||
<!-- 添加${functionName} -->
|
||
<el-col :span="1">
|
||
<el-button type="primary" @click="add${className}DialogVisible = true"> 添加 </el-button>
|
||
</el-col>
|
||
|
||
${btn}
|
||
|
||
<!-- 下拉操作 -->
|
||
<el-dropdown v-if="selectionData.length">
|
||
<el-button type="primary">
|
||
批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item @click="handleDelete(selectionData)">
|
||
批量删除
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</el-space>
|
||
<!-- 数据表格 -->
|
||
<DataTable
|
||
ref="tableRef"
|
||
style="width: 100%"
|
||
:onSelectionChange="data => (selectionData = data)"
|
||
:column="column"
|
||
:params="params"
|
||
:request="params => get${className}List(params)"
|
||
>
|
||
${imgTemplate}
|
||
${dictScope}
|
||
${sortTemplate}
|
||
${switchTemplate}
|
||
|
||
<template #chaoz="scope">
|
||
<el-space>
|
||
<el-button size="small" @click="handleUpdate(scope.row)">
|
||
编辑
|
||
</el-button>
|
||
<el-dropdown @command="handleCommand">
|
||
<el-button type="primary" size="small">
|
||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item :command="{ type: 'detail', row: scope.row}">
|
||
详情
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ type: 'delete', row: scope.row }">
|
||
删除
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</el-space>
|
||
</template>
|
||
</DataTable>
|
||
|
||
<!-- 添加${functionName} -->
|
||
<Add${className}Dialog v-model="add${className}DialogVisible" :done="() => tableRef.reload()"></Add${className}Dialog>
|
||
<!-- 编辑${functionName} -->
|
||
<Edit${className}Dialog
|
||
v-model="Edit${className}DialogVisible" :data="Edit${className}DialogRow" :done="() => tableRef.reload()"></Edit${className}Dialog>
|
||
<!-- ${functionName}详情 -->
|
||
<Detail${className}Dialog v-model="Detail${className}DialogVisible" :data="Detail${className}DialogRow"></Detail${className}Dialog>
|
||
</template>
|
||
<script setup>
|
||
import { ArrowDown } from '@element-plus/icons-vue';
|
||
import { ref, reactive,watch } from 'vue';
|
||
import { useLoginStore } from "~/store";
|
||
import { get${className}List, edit${className}, delete${className} ${dictFun} ${btnFunName} } from '~/service/${businessName}';
|
||
import Add${className}Dialog from './components/Add${className}Dialog.vue';
|
||
import Edit${className}Dialog from './components/Edit${className}Dialog.vue';
|
||
import Detail${className}Dialog from './components/Detail${className}Dialog.vue';
|
||
|
||
const tableRef = ref();
|
||
const selectionData = ref([]);
|
||
const store = useLoginStore();
|
||
|
||
const add${className}DialogVisible = ref(false);
|
||
const Edit${className}DialogVisible = ref(false);
|
||
const Edit${className}DialogRow = ref({});
|
||
const Detail${className}DialogVisible = ref(false);
|
||
const Detail${className}DialogRow = ref({});
|
||
|
||
const headers = {
|
||
Accept: "application/json",
|
||
...store.headers,
|
||
};
|
||
|
||
// 查询参数
|
||
const params = reactive({
|
||
${query}
|
||
});
|
||
const column = [
|
||
${cloumns}
|
||
];
|
||
|
||
|
||
const handleCommand = ({ type, row }) => {
|
||
switch (type) {
|
||
case "detail":
|
||
handleDetail(row);
|
||
break;
|
||
case 'delete':
|
||
handleDelete([row]);
|
||
break;
|
||
}
|
||
};
|
||
|
||
// 删除数据
|
||
const handleDelete = data => {
|
||
ElMessageBox.confirm(`您确定要删除该${functionName}吗？`).then(async () => {
|
||
const res = await delete${className}({
|
||
${businessName}_guid: data.map(v => v.${businessName}_guid).join()
|
||
});
|
||
if (res) {
|
||
tableRef.value.reload();
|
||
}
|
||
});
|
||
};
|
||
|
||
// 修改
|
||
function handleUpdate(row) {
|
||
Edit${className}DialogVisible.value = true
|
||
Edit${className}DialogRow.value = row
|
||
}
|
||
|
||
// 详情
|
||
function handleDetail(row) {
|
||
Detail${className}DialogVisible.value = true
|
||
Detail${className}DialogRow.value = row
|
||
}
|
||
|
||
${btnFun}
|
||
${sortTemplateFun}
|
||
${switchTemplateFun}
|
||
|
||
${dict}
|
||
</script>
|