From 3b774a197bd7087ee42999937ccc1e7e048eb1aa Mon Sep 17 00:00:00 2001 From: WXL <1785969728@qq.com> Date: 星期四, 11 一月 2024 18:03:17 +0800 Subject: [PATCH] 指标完成 --- src/views/system/dept/index.vue | 190 ++++++++++++++++++++++++++++++++++------------- 1 files changed, 137 insertions(+), 53 deletions(-) diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue index e502b4e..841e3c4 100644 --- a/src/views/system/dept/index.vue +++ b/src/views/system/dept/index.vue @@ -1,6 +1,12 @@ <template> <div class="app-container"> - <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> + <el-form + :model="queryParams" + ref="queryForm" + size="small" + :inline="true" + v-show="showSearch" + > <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName"> <el-input v-model="queryParams.deptName" @@ -10,7 +16,11 @@ /> </el-form-item> <el-form-item label="鐘舵��" prop="status"> - <el-select v-model="queryParams.status" placeholder="閮ㄩ棬鐘舵��" clearable> + <el-select + v-model="queryParams.status" + placeholder="閮ㄩ棬鐘舵��" + clearable + > <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" @@ -20,8 +30,16 @@ </el-select> </el-form-item> <el-form-item> - <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button> - <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button> + <el-button + type="primary" + icon="el-icon-search" + size="mini" + @click="handleQuery" + >鎼滅储</el-button + > + <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" + >閲嶇疆</el-button + > </el-form-item> </el-form> @@ -34,7 +52,8 @@ size="mini" @click="handleAdd" v-hasPermi="['system:dept:add']" - >鏂板</el-button> + >鏂板</el-button + > </el-col> <el-col :span="1.5"> <el-button @@ -43,9 +62,13 @@ icon="el-icon-sort" size="mini" @click="toggleExpandAll" - >灞曞紑/鎶樺彔</el-button> + >灞曞紑/鎶樺彔</el-button + > </el-col> - <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> + <right-toolbar + :showSearch.sync="showSearch" + @queryTable="getList" + ></right-toolbar> </el-row> <el-table @@ -54,21 +77,41 @@ :data="deptList" row-key="deptId" :default-expand-all="isExpandAll" - :tree-props="{children: 'children', hasChildren: 'hasChildren'}" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" > - <el-table-column prop="deptName" label="閮ㄩ棬鍚嶇О" width="260"></el-table-column> - <el-table-column prop="orderNum" label="鎺掑簭" width="200"></el-table-column> + <el-table-column + prop="deptName" + label="閮ㄩ棬鍚嶇О" + width="260" + ></el-table-column> + <el-table-column + prop="orderNum" + label="鎺掑簭" + width="200" + ></el-table-column> <el-table-column prop="status" label="鐘舵��" width="100"> <template slot-scope="scope"> - <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> + <dict-tag + :options="dict.type.sys_normal_disable" + :value="scope.row.status" + /> </template> </el-table-column> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="200"> + <el-table-column + label="鍒涘缓鏃堕棿" + align="center" + prop="createTime" + width="200" + > <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <el-table-column + label="鎿嶄綔" + align="center" + class-name="small-padding fixed-width" + > <template slot-scope="scope"> <el-button size="mini" @@ -76,14 +119,16 @@ icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']" - >淇敼</el-button> + >淇敼</el-button + > <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']" - >鏂板</el-button> + >鏂板</el-button + > <el-button v-if="scope.row.parentId != 0" size="mini" @@ -91,7 +136,8 @@ icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']" - >鍒犻櫎</el-button> + >鍒犻櫎</el-button + > </template> </el-table-column> </el-table> @@ -102,7 +148,12 @@ <el-row> <el-col :span="24" v-if="form.parentId !== 0"> <el-form-item label="涓婄骇閮ㄩ棬" prop="parentId"> - <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="閫夋嫨涓婄骇閮ㄩ棬" /> + <treeselect + v-model="form.parentId" + :options="deptOptions" + :normalizer="normalizer" + placeholder="閫夋嫨涓婄骇閮ㄩ棬" + /> </el-form-item> </el-col> </el-row> @@ -114,26 +165,42 @@ </el-col> <el-col :span="12"> <el-form-item label="鏄剧ず鎺掑簭" prop="orderNum"> - <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> + <el-input-number + v-model="form.orderNum" + controls-position="right" + :min="0" + /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="璐熻矗浜�" prop="leader"> - <el-input v-model="form.leader" placeholder="璇疯緭鍏ヨ礋璐d汉" maxlength="20" /> + <el-input + v-model="form.leader" + placeholder="璇疯緭鍏ヨ礋璐d汉" + maxlength="20" + /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鑱旂郴鐢佃瘽" prop="phone"> - <el-input v-model="form.phone" placeholder="璇疯緭鍏ヨ仈绯荤數璇�" maxlength="11" /> + <el-input + v-model="form.phone" + placeholder="璇疯緭鍏ヨ仈绯荤數璇�" + maxlength="11" + /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="閭" prop="email"> - <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�" maxlength="50" /> + <el-input + v-model="form.email" + placeholder="璇疯緭鍏ラ偖绠�" + maxlength="50" + /> </el-form-item> </el-col> <el-col :span="12"> @@ -143,7 +210,8 @@ v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value" - >{{dict.label}}</el-radio> + >{{ dict.label }}</el-radio + > </el-radio-group> </el-form-item> </el-col> @@ -158,13 +226,20 @@ </template> <script> -import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"; +import { + listDept, + getDept, + delDept, + addDept, + updateDept, + listDeptExcludeChild, +} from "@/api/system/dept"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; export default { name: "Dept", - dicts: ['sys_normal_disable'], + dicts: ["sys_normal_disable"], components: { Treeselect }, data() { return { @@ -187,36 +262,36 @@ // 鏌ヨ鍙傛暟 queryParams: { deptName: undefined, - status: undefined + status: undefined, }, // 琛ㄥ崟鍙傛暟 form: {}, // 琛ㄥ崟鏍¢獙 rules: { parentId: [ - { required: true, message: "涓婄骇閮ㄩ棬涓嶈兘涓虹┖", trigger: "blur" } + { required: true, message: "涓婄骇閮ㄩ棬涓嶈兘涓虹┖", trigger: "blur" }, ], deptName: [ - { required: true, message: "閮ㄩ棬鍚嶇О涓嶈兘涓虹┖", trigger: "blur" } + { required: true, message: "閮ㄩ棬鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }, ], orderNum: [ - { required: true, message: "鏄剧ず鎺掑簭涓嶈兘涓虹┖", trigger: "blur" } + { required: true, message: "鏄剧ず鎺掑簭涓嶈兘涓虹┖", trigger: "blur" }, ], email: [ { type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", - trigger: ["blur", "change"] - } + trigger: ["blur", "change"], + }, ], phone: [ { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", - trigger: "blur" - } - ] - } + trigger: "blur", + }, + ], + }, }; }, created() { @@ -226,8 +301,9 @@ /** 鏌ヨ閮ㄩ棬鍒楄〃 */ getList() { this.loading = true; - listDept(this.queryParams).then(response => { + listDept(this.queryParams).then((response) => { this.deptList = this.handleTree(response.data, "deptId"); + console.log(this.deptList); this.loading = false; }); }, @@ -239,7 +315,7 @@ return { id: node.deptId, label: node.deptName, - children: node.children + children: node.children, }; }, // 鍙栨秷鎸夐挳 @@ -257,7 +333,7 @@ leader: undefined, phone: undefined, email: undefined, - status: "0" + status: "0", }; this.resetForm("form"); }, @@ -278,7 +354,7 @@ } this.open = true; this.title = "娣诲姞閮ㄩ棬"; - listDept().then(response => { + listDept().then((response) => { this.deptOptions = this.handleTree(response.data, "deptId"); }); }, @@ -293,31 +369,35 @@ /** 淇敼鎸夐挳鎿嶄綔 */ handleUpdate(row) { this.reset(); - getDept(row.deptId).then(response => { + getDept(row.deptId).then((response) => { this.form = response.data; this.open = true; this.title = "淇敼閮ㄩ棬"; - listDeptExcludeChild(row.deptId).then(response => { + listDeptExcludeChild(row.deptId).then((response) => { this.deptOptions = this.handleTree(response.data, "deptId"); if (this.deptOptions.length == 0) { - const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] }; + const noResultsOptions = { + deptId: this.form.parentId, + deptName: this.form.parentName, + children: [], + }; this.deptOptions.push(noResultsOptions); } }); }); }, /** 鎻愪氦鎸夐挳 */ - submitForm: function() { - this.$refs["form"].validate(valid => { + submitForm: function () { + this.$refs["form"].validate((valid) => { if (valid) { if (this.form.deptId != undefined) { - updateDept(this.form).then(response => { + updateDept(this.form).then((response) => { this.$modal.msgSuccess("淇敼鎴愬姛"); this.open = false; this.getList(); }); } else { - addDept(this.form).then(response => { + addDept(this.form).then((response) => { this.$modal.msgSuccess("鏂板鎴愬姛"); this.open = false; this.getList(); @@ -328,13 +408,17 @@ }, /** 鍒犻櫎鎸夐挳鎿嶄綔 */ handleDelete(row) { - this.$modal.confirm('鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.deptName + '"鐨勬暟鎹」锛�').then(function() { - return delDept(row.deptId); - }).then(() => { - this.getList(); - this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); - } - } + this.$modal + .confirm('鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.deptName + '"鐨勬暟鎹」锛�') + .then(function () { + return delDept(row.deptId); + }) + .then(() => { + this.getList(); + this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + }) + .catch(() => {}); + }, + }, }; </script> -- Gitblit v1.9.3