From fe631515b71782a10a750874f6d4582fe027cd22 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 03 十一月 2025 09:32:49 +0800
Subject: [PATCH] 公司-所有的表格添加斑马纹
---
src/views/system/dept/index.vue | 162 +++++++++++++++++++++++++++++------------------------
1 files changed, 89 insertions(+), 73 deletions(-)
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index af51c50..8d7a26b 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,17 +1,17 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
- <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName">
+ <el-form-item label="鍏徃鍚嶇О" prop="deptName">
<el-input
v-model="queryParams.deptName"
- placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�"
+ placeholder="璇疯緭鍏ュ叕鍙稿悕绉�"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="鐘舵��" prop="status">
- <el-select v-model="queryParams.status" placeholder="閮ㄩ棬鐘舵��" clearable style="width: 200px">
+ <el-select v-model="queryParams.status" placeholder="鍏徃鐘舵��" clearable style="width: 200px">
<el-option
v-for="dict in sys_normal_disable"
:key="dict.value"
@@ -54,8 +54,9 @@
row-key="deptId"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+ stripe
>
- <el-table-column prop="deptName" label="閮ㄩ棬鍚嶇О" width="260"></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 #default="scope">
@@ -76,31 +77,30 @@
</el-table-column>
</el-table>
- <!-- 娣诲姞鎴栦慨鏀归儴闂ㄥ璇濇 -->
+ <!-- 娣诲姞鎴栦慨鏀瑰叕鍙稿璇濇 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
<el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24" v-if="form.parentId !== 0">
- <el-form-item label="涓婄骇閮ㄩ棬" prop="parentId">
+ <el-form-item label="涓婄骇鍏徃" prop="parentId">
<el-tree-select
v-model="form.parentId"
:data="deptOptions"
:props="{ value: 'deptId', label: 'deptName', children: 'children' }"
value-key="deptId"
- placeholder="閫夋嫨涓婄骇閮ㄩ棬"
+ placeholder="閫夋嫨涓婄骇鍏徃"
check-strictly
- :render-after-expand="false"
/>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName">
- <el-input v-model="form.deptName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" />
+ <el-form-item label="鍏徃鍚嶇О" prop="deptName">
+ <el-input v-model="form.deptName" placeholder="璇疯緭鍏ュ叕鍙稿悕绉�" />
</el-form-item>
</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-col :span="12">
@@ -119,16 +119,21 @@
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="閮ㄩ棬鐘舵��">
+ <el-form-item label="鍏徃鐘舵��">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in sys_normal_disable"
:key="dict.value"
- :label="dict.value"
+ :value="dict.value"
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
+ <el-col :span="12">
+ <el-form-item label="鍏徃缂栧彿" prop="deptNick">
+ <el-input v-model="form.deptNick" placeholder="璇疯緭鍏ュ叕鍙哥紪鍙�" maxlength="50" />
+ </el-form-item>
+ </el-col>
</el-row>
</el-form>
<template #footer>
@@ -142,19 +147,19 @@
</template>
<script setup name="Dept">
-import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
+import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
-const deptList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const title = ref("");
-const deptOptions = ref([]);
-const isExpandAll = ref(true);
-const refreshTable = ref(true);
+const deptList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const title = ref("")
+const deptOptions = ref([])
+const isExpandAll = ref(true)
+const refreshTable = ref(true)
const data = reactive({
form: {},
@@ -163,29 +168,32 @@
status: undefined
},
rules: {
- parentId: [{ required: true, message: "涓婄骇閮ㄩ棬涓嶈兘涓虹┖", trigger: "blur" }],
- deptName: [{ required: true, message: "閮ㄩ棬鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
+ parentId: [{ required: true, message: "涓婄骇鍏徃涓嶈兘涓虹┖", trigger: "blur" }],
+ deptName: [{ required: true, message: "鍏徃鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
orderNum: [{ required: true, message: "鏄剧ず鎺掑簭涓嶈兘涓虹┖", trigger: "blur" }],
email: [{ type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] }],
- phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }]
+ phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }],
+ deptNick: [{ required: true, message: "鍏徃缂栧彿涓嶈兘涓虹┖", trigger: "blur" }],
},
-});
+})
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
-/** 鏌ヨ閮ㄩ棬鍒楄〃 */
+/** 鏌ヨ鍏徃鍒楄〃 */
function getList() {
- loading.value = true;
+ loading.value = true
listDept(queryParams.value).then(response => {
- deptList.value = proxy.handleTree(response.data, "deptId");
- loading.value = false;
- });
+ deptList.value = proxy.handleTree(response.data, "deptId")
+ loading.value = false
+ })
}
+
/** 鍙栨秷鎸夐挳 */
function cancel() {
- open.value = false;
- reset();
+ open.value = false
+ reset()
}
+
/** 琛ㄥ崟閲嶇疆 */
function reset() {
form.value = {
@@ -196,80 +204,88 @@
leader: undefined,
phone: undefined,
email: undefined,
- status: "0"
- };
- proxy.resetForm("deptRef");
+ status: "0",
+ deptNick: undefined,
+ }
+ proxy.resetForm("deptRef")
}
+
/** 鎼滅储鎸夐挳鎿嶄綔 */
function handleQuery() {
- getList();
+ getList()
}
+
/** 閲嶇疆鎸夐挳鎿嶄綔 */
function resetQuery() {
- proxy.resetForm("queryRef");
- handleQuery();
+ proxy.resetForm("queryRef")
+ handleQuery()
}
+
/** 鏂板鎸夐挳鎿嶄綔 */
function handleAdd(row) {
- reset();
+ reset()
listDept().then(response => {
- deptOptions.value = proxy.handleTree(response.data, "deptId");
- });
+ deptOptions.value = proxy.handleTree(response.data, "deptId")
+ })
if (row != undefined) {
- form.value.parentId = row.deptId;
+ form.value.parentId = row.deptId
}
- open.value = true;
- title.value = "娣诲姞閮ㄩ棬";
+ open.value = true
+ title.value = "娣诲姞鍏徃"
}
+
/** 灞曞紑/鎶樺彔鎿嶄綔 */
function toggleExpandAll() {
- refreshTable.value = false;
- isExpandAll.value = !isExpandAll.value;
+ refreshTable.value = false
+ isExpandAll.value = !isExpandAll.value
nextTick(() => {
- refreshTable.value = true;
- });
+ refreshTable.value = true
+ })
}
+
/** 淇敼鎸夐挳鎿嶄綔 */
function handleUpdate(row) {
- reset();
+ reset()
listDeptExcludeChild(row.deptId).then(response => {
- deptOptions.value = proxy.handleTree(response.data, "deptId");
- });
+ deptOptions.value = proxy.handleTree(response.data, "deptId")
+ })
getDept(row.deptId).then(response => {
- form.value = response.data;
- open.value = true;
- title.value = "淇敼閮ㄩ棬";
- });
+ form.value = response.data
+ open.value = true
+ title.value = "淇敼鍏徃"
+ })
}
+
/** 鎻愪氦鎸夐挳 */
function submitForm() {
proxy.$refs["deptRef"].validate(valid => {
if (valid) {
if (form.value.deptId != undefined) {
updateDept(form.value).then(response => {
- proxy.$modal.msgSuccess("淇敼鎴愬姛");
- open.value = false;
- getList();
- });
+ proxy.$modal.msgSuccess("淇敼鎴愬姛")
+ open.value = false
+ getList()
+ })
} else {
addDept(form.value).then(response => {
- proxy.$modal.msgSuccess("鏂板鎴愬姛");
- open.value = false;
- getList();
- });
+ proxy.$modal.msgSuccess("鏂板鎴愬姛")
+ open.value = false
+ getList()
+ })
}
}
- });
+ })
}
+
/** 鍒犻櫎鎸夐挳鎿嶄綔 */
function handleDelete(row) {
proxy.$modal.confirm('鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.deptName + '"鐨勬暟鎹」?').then(function() {
- return delDept(row.deptId);
+ return delDept(row.deptId)
}).then(() => {
- getList();
- proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- }).catch(() => {});
+ getList()
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
+ }).catch(() => {})
}
-getList();
+getList()
</script>
--
Gitblit v1.9.3