|
|
@@ -9,9 +9,6 @@ export default {
|
|
|
{ label: "停用", value: "2" },
|
|
|
],
|
|
|
};
|
|
|
- const formatter = function (row, { property }, cellValue, index) {
|
|
|
- return dict[property].find((item) => item.value === row[property]).label;
|
|
|
- };
|
|
|
const columns = [
|
|
|
{
|
|
|
type: "text",
|
|
|
@@ -42,7 +39,7 @@ export default {
|
|
|
prop: "status",
|
|
|
label: "启用状态",
|
|
|
showOverflowTooltip: true,
|
|
|
- formatter: formatter,
|
|
|
+ formatter: true,
|
|
|
},
|
|
|
{
|
|
|
type: "text",
|
|
|
@@ -73,6 +70,7 @@ export default {
|
|
|
readonly: true,
|
|
|
},
|
|
|
];
|
|
|
+ const initDict = () => dict;
|
|
|
const initColumns = () => columns;
|
|
|
const initOptions = () =>
|
|
|
initColumns().map((item) => ({ label: item.label, value: item.prop }));
|
|
|
@@ -83,80 +81,94 @@ export default {
|
|
|
};
|
|
|
return {
|
|
|
loading: false,
|
|
|
+ dict: initDict(),
|
|
|
+ columns: initColumns(),
|
|
|
form: initForm(),
|
|
|
options: initOptions(),
|
|
|
- columns: initColumns(),
|
|
|
tableData: [],
|
|
|
- selectionTableData: [],
|
|
|
+ currentData: {},
|
|
|
page: { pageNum: 1, pageSize: 25 },
|
|
|
total: 0,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
//
|
|
|
+ formatter({ row, column: { property } }) {
|
|
|
+ return this.dict[property].find((item) => item.value === row[property])
|
|
|
+ .label;
|
|
|
+ },
|
|
|
+ // 请求
|
|
|
fetchList() {
|
|
|
this.loading = true;
|
|
|
list(this.from, this.page)
|
|
|
.then((res) => {
|
|
|
let { code, total, rows } = res;
|
|
|
if (code === 200) {
|
|
|
- this.tableData = rows;
|
|
|
this.total = total;
|
|
|
- this.$message.success("success");
|
|
|
+ this.tableData = rows;
|
|
|
+ this.currentData = rows[0];
|
|
|
+ this.$message.success("查询成功");
|
|
|
}
|
|
|
})
|
|
|
.finally(() => {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
- //
|
|
|
- onSearch() {
|
|
|
+ // 搜索
|
|
|
+ handleSearch() {
|
|
|
this.pageNum = 1;
|
|
|
this.fetchList();
|
|
|
},
|
|
|
- //
|
|
|
- onReset() {
|
|
|
+ // 重置
|
|
|
+ handleReset() {
|
|
|
this.pageNum = 1;
|
|
|
this.pageSize = 25;
|
|
|
this.fetchList();
|
|
|
},
|
|
|
- //
|
|
|
- onSizeChnage() {
|
|
|
+ // 个数
|
|
|
+ handleSize() {
|
|
|
this.pageNum = 1;
|
|
|
this.fetchList();
|
|
|
},
|
|
|
- //
|
|
|
- onCurrentChange() {
|
|
|
+ // 页数
|
|
|
+ handleCurrent() {
|
|
|
this.fetchList();
|
|
|
},
|
|
|
- //
|
|
|
- onCopy(prop) {
|
|
|
+ // 高亮
|
|
|
+ handleRowClass({ row }) {
|
|
|
+ if (row.id === this.currentData.id) return "current-row";
|
|
|
+ },
|
|
|
+ // 选择
|
|
|
+ handleCurrentRowSelect(row) {
|
|
|
+ this.currentData = row;
|
|
|
+ },
|
|
|
+ // 复制
|
|
|
+ handleCopy(prop) {
|
|
|
this.$parent.$children
|
|
|
.find((el) => el.$vnode.tag.indexOf("AddDialog") > -1)
|
|
|
.fetchItem(prop);
|
|
|
},
|
|
|
- //
|
|
|
- onEdit(prop) {
|
|
|
+ // 编辑
|
|
|
+ handleEdit(prop) {
|
|
|
this.$parent.$children
|
|
|
.find((el) => el.$vnode.tag.indexOf("EditDialog") > -1)
|
|
|
.fetchItem(prop);
|
|
|
},
|
|
|
- //
|
|
|
- onAuth(prop) {
|
|
|
+ // 授权
|
|
|
+ handleAuth(prop) {
|
|
|
this.$parent.$children
|
|
|
.find((el) => el.$vnode.tag.indexOf("AuthDialog") > -1)
|
|
|
.fetchItem(prop);
|
|
|
},
|
|
|
- //
|
|
|
- onDelete(prop) {
|
|
|
- let { id } = prop;
|
|
|
+ // 删除
|
|
|
+ handleDelete(prop) {
|
|
|
this.loading = true;
|
|
|
- remove(id)
|
|
|
+ remove(prop.id)
|
|
|
.then((res) => {
|
|
|
let { code } = res;
|
|
|
if (code === 200) {
|
|
|
- this.$message.success("删除成功");
|
|
|
this.fetchList();
|
|
|
+ this.$message.success("删除成功");
|
|
|
}
|
|
|
})
|
|
|
.finally(() => {
|
|
|
@@ -165,57 +177,66 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
- this.onSearch();
|
|
|
+ this.handleSearch();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <el-container class="table-template-table">
|
|
|
+ <el-container class="table-template">
|
|
|
<el-header>
|
|
|
- <div class="table-header-top">
|
|
|
- <span>查询条件</span>
|
|
|
- <div>
|
|
|
- <el-select v-model="form.select" size="small" placeholder="请选择">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-input
|
|
|
- v-model="form.input"
|
|
|
- size="small"
|
|
|
- placeholder="请输入内容"
|
|
|
- :readonly="loading"
|
|
|
- >
|
|
|
- <template #suffix>
|
|
|
- <i v-show="loading" class="el-input__icon el-icon-loading"></i>
|
|
|
- <i v-show="!loading" class="el-input__icon el-icon-search"></i>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- <el-button size="small" @click="onSearch">搜索</el-button>
|
|
|
- <el-button size="small" @click="onReset">重置</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="table-header-bottom">
|
|
|
+ <div>
|
|
|
+ <el-button @click.native.prevent="handleCopy(currentData)" size="small">
|
|
|
+ 复制
|
|
|
+ </el-button>
|
|
|
+ <el-button @click.native.prevent="handleEdit(currentData)" size="small">
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ <el-button @click.native.prevent="handleAuth(currentData)" size="small">
|
|
|
+ 授权
|
|
|
+ </el-button>
|
|
|
<el-button
|
|
|
+ @click.native.prevent="handleDelete(currentData)"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-select v-model="form.select" size="small" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ v-model="form.input"
|
|
|
size="small"
|
|
|
- :disabled="selectionTableData.length !== 1"
|
|
|
- @click="onCopy(selectionTableData[0])"
|
|
|
- >复制</el-button
|
|
|
+ placeholder="请输入内容"
|
|
|
+ :readonly="loading"
|
|
|
>
|
|
|
- </div> -->
|
|
|
+ <template #suffix>
|
|
|
+ <i v-show="loading" class="el-input__icon el-icon-loading"></i>
|
|
|
+ <i v-show="!loading" class="el-input__icon el-icon-search"></i>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <el-button size="small" @click="handleSearch">搜索</el-button>
|
|
|
+ <el-button size="small" @click="handleReset">重置</el-button>
|
|
|
+ </div>
|
|
|
</el-header>
|
|
|
<el-main>
|
|
|
<el-table
|
|
|
v-loading="loading"
|
|
|
- stripe
|
|
|
highlight-current-row
|
|
|
+ height="100%"
|
|
|
:data="tableData"
|
|
|
+ @row-click="handleCurrentRowSelect"
|
|
|
+ :row-class-name="handleRowClass"
|
|
|
>
|
|
|
+ <el-table-column type="index" width="50"> </el-table-column>
|
|
|
<el-table-column
|
|
|
width="200"
|
|
|
v-for="column in columns"
|
|
|
@@ -223,31 +244,18 @@ export default {
|
|
|
:prop="column.prop"
|
|
|
:label="column.label"
|
|
|
:show-overflow-tooltip="column.showOverflowTooltip"
|
|
|
- :formatter="column.formatter"
|
|
|
>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed="right" label="操作" width="300">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button @click.native.prevent="onCopy(scope.row)" size="small">
|
|
|
- 复制
|
|
|
- </el-button>
|
|
|
- <el-button @click.native.prevent="onEdit(scope.row)" size="small">
|
|
|
- 修改
|
|
|
- </el-button>
|
|
|
- <el-button @click.native.prevent="onAuth(scope.row)" size="small">
|
|
|
- 授权
|
|
|
- </el-button>
|
|
|
- <el-button @click.native.prevent="onDelete(scope.row)" size="small">
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
+ <span v-if="column.formatter">{{ formatter(scope) }}</span>
|
|
|
+ <span v-else>{{ scope.row[column.prop] }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-main>
|
|
|
<el-footer>
|
|
|
<el-pagination
|
|
|
- @size-change="onSizeChnage"
|
|
|
- @current-change="onCurrentChange"
|
|
|
+ @size-change="handleSize"
|
|
|
+ @current-change="handleCurrent"
|
|
|
:current-page="page.pageNum"
|
|
|
:page-sizes="[25, 50, 100]"
|
|
|
:page-size="page.pageSize"
|
|
|
@@ -260,34 +268,29 @@ export default {
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
-.table-template-table .el-header {
|
|
|
- height: fit-content !important;
|
|
|
- padding-top: var(--padding);
|
|
|
- padding-bottom: var(--padding);
|
|
|
+.table-template .el-header {
|
|
|
border-bottom: 1px solid #dcdfe6;
|
|
|
-}
|
|
|
-.table-template-table .table-header-top {
|
|
|
- margin-bottom: var(--margin);
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.table-template-table .table-header-top .el-select {
|
|
|
+
|
|
|
+.table-template .el-header .el-select {
|
|
|
width: 150px;
|
|
|
margin-right: var(--margin);
|
|
|
}
|
|
|
-.table-template-table .table-header-top .el-input {
|
|
|
+.table-template .el-header .el-input {
|
|
|
width: 250px;
|
|
|
margin-right: var(--margin);
|
|
|
}
|
|
|
-.table-template-table .el-main {
|
|
|
+.table-template .el-main {
|
|
|
padding: 0;
|
|
|
}
|
|
|
-.table-template-table .el-main .el-table {
|
|
|
+.table-template .el-main .el-table {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
-.table-template-table .el-footer {
|
|
|
+.table-template .el-footer {
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
align-items: center;
|
002201