|
@@ -0,0 +1,161 @@
|
|
|
+<template>
|
|
|
+ <div id="itemList">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="12" class="topTitle">
|
|
|
+ <span>{{ pageTitle }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="topAdd">
|
|
|
+ <el-button type="primary" size="mini" @click="toAdd()"><i class="el-icon-plus"></i></el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <data-table :fields="fields" @delete="toDelete" :data="list" :total="total" :opera="opera" @edit="toEdit" :usePage="true"></data-table>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-drawer title="字典项" :visible.sync="drawer" direction="rtl" @closed="handleClose" :destroy-on-close="true">
|
|
|
+ <data-form :fields="fields" :data="form" :rules="{}" @save="drawerSave" :isNew="drawerIsNew">
|
|
|
+ <template #options="{item}">
|
|
|
+ <template v-if="item.model === 'category'">
|
|
|
+ <el-option v-for="(i, index) in categoryList" :key="index" :label="i.name" :value="i.code"></el-option>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </data-form>
|
|
|
+ </el-drawer>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import dataForm from '@/components/form.vue';
|
|
|
+import dataTable from '@/components/data-table.vue';
|
|
|
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: codeitem } = createNamespacedHelpers('codeitem');
|
|
|
+const { mapActions: codeCategory } = createNamespacedHelpers('codeCategory');
|
|
|
+export default {
|
|
|
+ name: 'itemList',
|
|
|
+ props: {
|
|
|
+ category: String,
|
|
|
+ categoryList: Array,
|
|
|
+ },
|
|
|
+ components: { dataTable, dataForm },
|
|
|
+ data: () => {
|
|
|
+ return {
|
|
|
+ pageTitle: '字典项',
|
|
|
+ drawer: false,
|
|
|
+ form: {},
|
|
|
+ drawerIsNew: true,
|
|
|
+ opera: [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ method: 'edit',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ icon: 'el-icon-delete',
|
|
|
+ method: 'delete',
|
|
|
+ confirm: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fields: [
|
|
|
+ { label: '名称', prop: 'name', model: 'name' },
|
|
|
+ { label: '代码', prop: 'code', model: 'code' },
|
|
|
+ { label: '类别代码', prop: 'category', model: 'category', type: 'select' },
|
|
|
+ ],
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ ...codeitem(['query', 'create', 'update', 'delete']),
|
|
|
+ async search({ skip = 0, category = this.category, limit = 10, ...info } = {}) {
|
|
|
+ // ...info, category: this.category
|
|
|
+ const res = await this.query(({ skip = 0, limit = 10, ...info } = {}));
|
|
|
+ console.log(res.total);
|
|
|
+
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `list`, res.data);
|
|
|
+ this.$set(this, `total`, res.total);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toAdd() {
|
|
|
+ this.drawer = true;
|
|
|
+ },
|
|
|
+ toEdit({ data }) {
|
|
|
+ this.$set(this, 'form', data);
|
|
|
+ this.drawer = true;
|
|
|
+ this.drawerIsNew = false;
|
|
|
+ },
|
|
|
+ async drawerSave({ data, isNew }) {
|
|
|
+ let res;
|
|
|
+ let msg;
|
|
|
+ if (isNew) {
|
|
|
+ res = await this.create(data);
|
|
|
+ msg = '字典项创建成功';
|
|
|
+ } else {
|
|
|
+ res = await this.update(data);
|
|
|
+ msg = '字典项修改成功';
|
|
|
+ }
|
|
|
+ if (this.$checkRes(res, msg, res.errmsg)) {
|
|
|
+ this.handleClose();
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async toDelete({ data }) {
|
|
|
+ const res = await this.delete(data.id);
|
|
|
+ if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.drawer = false;
|
|
|
+ this.form = {};
|
|
|
+ if (this.category) this.form.category = this.category;
|
|
|
+ this.drawerIsNew = true;
|
|
|
+ },
|
|
|
+ async getOtherList() {
|
|
|
+ let res = await this.getCategoryList();
|
|
|
+ if (this.$checkRes(res)) this.$set(this, `categoryList`, res.data);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ category: {
|
|
|
+ handler(val) {
|
|
|
+ if (val) {
|
|
|
+ this.search();
|
|
|
+ this.$set(this.form, `category`, val);
|
|
|
+ let res = this.categoryList.find(f => f.code == val);
|
|
|
+ console.log(res);
|
|
|
+ if (res) this.$set(this, `pageTitle`, res.name);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.top {
|
|
|
+ padding: 15px 0;
|
|
|
+ border-bottom: 1px solid #cccc;
|
|
|
+}
|
|
|
+.top .topTitle {
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+.top .topAdd {
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.page {
|
|
|
+ padding: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|