From 77a041c5e9a31ad96fce404f06fe0c03f4031b1d Mon Sep 17 00:00:00 2001 From: Fixiaobai <fixiaobai@163.com> Date: 星期一, 28 八月 2023 09:19:13 +0800 Subject: [PATCH] Merge branch 'master' of http://192.168.110.209:9001/r/lims-before --- src/views/laboratory/personnel/index.vue | 435 ++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 337 insertions(+), 98 deletions(-) diff --git a/src/views/laboratory/personnel/index.vue b/src/views/laboratory/personnel/index.vue index 26998b3..4259f2f 100644 --- a/src/views/laboratory/personnel/index.vue +++ b/src/views/laboratory/personnel/index.vue @@ -1,5 +1,5 @@ <template> - <div class="personnel-main "> + <div class="personnel-main"> <div class="page-header-search"> <div class="search-bar"> <el-form ref="form" :inline="true"> @@ -10,74 +10,197 @@ </el-form-item> <el-form-item> <el-button type="primary" @click="getData()">鏌ヨ</el-button> - <el-button type="primary" plain @click="resetData()">閲嶇疆</el-button> + <el-button type="primary" plain @click="resetData()" + >閲嶇疆</el-button + > <!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> --> </el-form-item> </el-form> </div> <div class="serve-btn"> - <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">鏂板浜哄憳</el-button> + <el-button + type="primary" + icon="el-icon-plus" + @click="dialogFormVisible = true" + >鏂板浜哄憳</el-button + > - <el-dialog title="鏂板浜哄憳" :visible.sync="dialogFormVisible" width="30%"> - <el-form :model="form" :rules="rules"> - <el-form-item label="璐﹀彿" :label-width="formLabelWidth" prop="account"> - <el-input v-model="form.account" autocomplete="off" /> + <el-dialog + :title="isUpdate == true ? '鏇存柊浜哄憳淇℃伅' : '鏂板浜哄憳'" + :visible.sync="dialogFormVisible" + width="30%" + > + <el-form :model="form" ref="form" :rules="rules"> + <el-form-item + label="璐﹀彿" + :label-width="formLabelWidth" + prop="account" + > + <el-input v-model="form.account" /> </el-form-item> <el-form-item label="骞撮緞" :label-width="formLabelWidth"> - <el-input v-model="form.age" autocomplete="off" /> + <el-input v-model="form.age" /> </el-form-item> - <el-form-item label="閭" :label-width="formLabelWidth" prop="email"> - <el-input v-model="form.email" autocomplete="off" /> + <el-form-item + label="閭" + :label-width="formLabelWidth" + prop="email" + > + <el-input v-model="form.email" /> </el-form-item> - <el-form-item label="鍚嶅瓧" :label-width="formLabelWidth" prop="name"> - <el-input v-model="form.name" autocomplete="off" /> + <el-form-item + label="鍚嶅瓧" + :label-width="formLabelWidth" + prop="name" + > + <el-input v-model="form.name" /> </el-form-item> - <el-form-item label="鐢佃瘽" :label-width="formLabelWidth" prop="phone"> - <el-input v-model="form.phone" autocomplete="off" /> + <el-form-item + label="鐢佃瘽" + :label-width="formLabelWidth" + prop="phone" + > + <el-input v-model="form.phone" /> </el-form-item> - <el-form-item label="鏉冮檺" :label-width="formLabelWidth" prop="role_id"> - <el-input v-model="form.role_id" autocomplete="off" /> + <el-form-item + label="閮ㄩ棬" + :label-width="formLabelWidth" + required + prop="organizationId" + > + <el-cascader + style="width: 100%" + :options="options" + :props="myProp" + v-model="form.organizationId" + clearable + ></el-cascader> + </el-form-item> + + <el-form-item + label="鏉冮檺" + :label-width="formLabelWidth" + prop="roleId" + > + <el-select + v-model="form.roleId" + clearable + style="100%" + placeholder="璇烽�夋嫨鏉冮檺" + > + <el-option + v-for="item in roleList" + :key="item.id" + :label="item.name" + :value="item.id" + > + </el-option> + </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">鍙� 娑�</el-button> - <el-button type="primary" @click="submitForm()">纭� 瀹�</el-button> + <el-button type="primary" @click="submitForm()">{{ + isUpdate == true ? "鏇� 鏂�" : "纭� 瀹�" + }}</el-button> </div> </el-dialog> </div> </div> <div class="content-main"> <div class="personner-table"> - <el-table ref="personnerlTable" :max-height="700" :cell-style="{ textAlign: 'center' }" - :header-cell-style="{ border: '0px', background: '#f5f7fa', color: '#606266', boxShadow: 'inset 0 1px 0 #ebeef5', textAlign: 'center' }" - :data="personnerlTable" style="width: 100%"> + <el-table + ref="personnerlTable" + height="calc(100vh - 240px)" + border + :cell-style="{ textAlign: 'center' }" + :header-cell-style="{ + border: '0px', + background: '#f5f7fa', + color: '#606266', + boxShadow: 'inset 0 1px 0 #ebeef5', + textAlign: 'center', + }" + @filter-change="fnFilterChangeInit" + :data="personnerlTable" + style="width: 100%" + > <el-table-column prop="username" label="瑙掕壊鍚嶇О" min-width="120" /> <el-table-column prop="roleName" label="瑙掕壊鏉冮檺" min-width="120" /> - <el-table-column prop="age" label="骞撮緞" min-width="150" /> + <el-table-column prop="age" label="骞撮緞" min-width="150"> + <template scope="scope"> + {{ + scope.row.age === "" || + scope.row.age === null || + scope.row.age == undefined + ? "---" + : scope.row.age + }} + </template> + </el-table-column> + <el-table-column prop="department" label="閮ㄩ棬" min-width="150" /> <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="180" /> - <el-table-column prop="phone" label="鐢佃瘽" min-width="200" /> - <el-table-column prop="email" label="閭" min-width="200" /> - <el-table-column prop="jobState" label="鍦ㄨ亴鐘舵��" min-width="120" - :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]" :filter-method="filterTag" - filter-placement="bottom-end"> + <el-table-column prop="phone" label="鐢佃瘽" min-width="200"> + <template scope="scope"> + {{ + scope.row.phone === "" || scope.row.phone === undefined + ? "---" + : scope.row.phone + }} + </template> + </el-table-column> + <el-table-column prop="email" label="閭" min-width="200"> + <template scope="scope"> + {{ + scope.row.email === "" || scope.row.email === undefined + ? "---" + : scope.row.email + }} + </template> + </el-table-column> + <el-table-column + prop="jobState" + label="鍦ㄨ亴鐘舵��" + min-width="120" + :filters="[ + { text: '鍦ㄨ亴', value: 1 }, + { text: '绂诲矖', value: 0 }, + ]" + column-key="status" + :filter-method="filterTag" + filter-placement="bottom-end" + > <template slot-scope="scope"> - <el-tag :type="scope.row.jobState === 0 ? 'danger' : 'success'" disable-transitions>{{ - scope.row.jobState === 0 ? '绂诲矖' : '鍦ㄨ亴' }}</el-tag> + <el-tag + :type="scope.row.jobState === 0 ? 'danger' : 'success'" + disable-transitions + >{{ scope.row.jobState === 0 ? "绂诲矖" : "鍦ㄨ亴" }}</el-tag + > </template> </el-table-column> <el-table-column label="鎿嶄綔" min-width="120"> <template slot-scope="scope"> - <el-button type="text" size="small" @click="handleClick(scope.row)">缂栬緫</el-button> - <!-- <el-button type="text" size="small">缂栬緫</el-button> --> + <el-button + type="text" + size="small" + @click="handleClick(scope.row)" + >缂栬緫</el-button + > </template> </el-table-column> </el-table> <div> <!-- 鍒嗛〉鍣� --> - <el-pagination :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="pageSize" - layout="total, sizes, prev, pager, next, jumper" :total="this.personnerlTable.length" - @size-change="handleSizeChange" @current-change="handleCurrentChange" /> + <el-pagination + :current-page="currentPage" + :page-sizes="[10, 15, 20, 25]" + :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> </div> </div> </div> @@ -85,15 +208,15 @@ </template> <script> -import { get, post } from '@/api/util/requestUtil'; -import urlInfo from '../../../api/urlEnum/personnel.js' +import { get, post, put } from "@/api/util/requestUtil"; +import urlInfo from "../../../api/urlEnum/personnel.js"; +import { getOrganizationalApi } from "@/api/laboratory/organizational"; export default { data() { return { - keyword: '', - personnerlTable: [ - - ], + keyword: "", + roleList: "", + personnerlTable: [], filteredpersonnerlTable: [], currentindex: 1, currentPage: 1, // 褰撳墠椤电爜 @@ -102,108 +225,224 @@ personData: [], // 鐢ㄦ潵瀛樻斁鎺ュ彛浼犺繃鏉ョ殑浜哄憳鍒楄〃鏁版嵁 dialogFormVisible: false, form: { - account: '', - age: '', - email: '', - name: '', - phone: '', - role_id: '' + account: "", + age: "", + email: "", + name: "", + phone: "", + organizationId: "", + roleId: "", }, - formLabelWidth: '100px', + myProp: { + value: "id", + label: "department", + checkStrictly: true, //鍏佽閫夋嫨浠绘剰涓�鑺� + }, + formLabelWidth: "100px", rules: { account: [ { - required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur' - } + required: true, + message: "璇疯緭鍏ヨ处鍙�", + trigger: "blur", + }, ], - name: [{ - required: true, message: '璇疯緭鍏ュ悕瀛�', trigger: 'blur' - }], + name: [ + { + required: true, + message: "璇疯緭鍏ュ悕瀛�", + trigger: "blur", + }, + ], phone: [ // { required: true, message: '璇疯緭鍏�11浣嶇數璇濆彿鐮�', trigger: 'blur' }, - { pattern: /^1[34578]\d{9}$/, message: '闈炴硶鎵嬫満鍙风爜', trigger: 'blur' } + { + pattern: /^1[3456789]\d{9}$/, + message: "闈炴硶鎵嬫満鍙风爜", + trigger: ["blur", "change"], + }, ], email: [ // { required: true, message: '璇疯緭鍏ラ偖绠卞湴鍧�', trigger: 'blur' }, - { type: 'email', message: '闈炴硶閭鍦板潃', trigger: ['blur', 'change'] } + { + type: "email", + message: "闈炴硶閭鍦板潃", + trigger: ["blur", "change"], + }, ], - role_id: [ - { required: true, message: '璇疯緭鍏ユ潈闄�(0鎴�1)', trigger: 'blur' } - - ] - } - } + organizationId: [ + { + required: true, + type: "array", + message: "璇烽�夋嫨閮ㄩ棬", + trigger: "change", + }, + ], + roleId: [ + { required: true, message: "璇疯緭鍏ユ潈闄�(0鎴�1)", trigger: "blur" }, + ], + }, + options: [], + status: "", + isUpdate: false, + }; }, mounted() { - this.getData() + this.getData(); + this.getTreeData(); }, methods: { // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣 handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉) - this.currentPage = 1 - this.pageSize = val + console.log(`姣忛〉 ${val} 鏉); + this.currentPage = 1; + this.pageSize = val; }, - filterTag() { - console.log(11); + filterTag(value) { + this.status = ""; + this.status = value; + return true; }, // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤� handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`) - this.currentPage = val + console.log(`褰撳墠椤�: ${val}`); + this.currentPage = val; }, async getData() { let data = { pageNo: 0, - pageSize: 20, - name: this.keyword - } + pageSize: 10, + name: this.keyword, + status: this.status, + }; let res = await get(urlInfo.url.list_new_personnel, data); - this.personnerlTable=res.data.row - this.total=res.data.total + this.personnerlTable = res.data.row; + this.total = res.data.total; }, searchData() { this.filteredpersonnerlTable = this.personnerlTable.filter((item) => { - return item.username === this.keyword - } - ) - this.personnerlTable = this.filteredpersonnerlTable + return item.username === this.keyword; + }); + this.personnerlTable = this.filteredpersonnerlTable; }, resetData() { - // console.log("111111") - this.personnerlTable = this.personData - this.keyword = '' + this.personnerlTable = this.personData; + this.keyword = ""; + this.status = ""; + this.getData(); }, // 鎻愪氦鏂板浜哄憳琛ㄥ崟 submitForm() { - // Handle form submission here - // console.log(this.form); - // POST璇锋眰 this.$refs.form.validate((valid) => { if (valid) { - this.dialogFormVisible = false - axios.post('/user/add_new_personnel', this.form) - .then(response => { - console.log(response) - // this.dialogVisible = false; - }) - .catch(error => { - console.error(error) - }) + let departmentId = this.form.organizationId; + this.form.organizationId = departmentId[departmentId.length - 1]; + if (!this.isUpdate) { + post("/user/add_new_personnel", this.form).then((response) => { + this.$message({ + message: response.message, + type: "success", + }); + this.dialogFormVisible = false; + this.getData(); + }); + } else { + put("/user/update_new_personnel", this.form).then((res) => { + this.$message({ + message: res.message, + type: "success", + }); + this.dialogFormVisible = false; + this.getData(); + }); + } } else { - console.log('error submit!!') - return false + console.log("error submit!!"); + return false; } - }) + }); }, - } + // 娓呯┖Cascader绌虹櫧 + clearCascaderBlank(list) { + list.forEach((i) => { + if (i.children.length === 0) { + i.children = undefined; + } else { + this.clearCascaderBlank(i.children); + } + }); + }, + fnFilterChangeInit() { + this.personData = []; + this.getData(); + }, + /* + * @param list 鏁版嵁鍒楄〃 + * @param id 鍚庣杩斿洖鐨刬d + **/ + getParentsById(list, id) { + for (let i in list) { + if (list[i].id == id) { + return [list[i].id]; + } + if (list[i].children) { + let node = this.getParentsById(list[i].children, id); + if (node !== undefined) { + //鏌ヨ鍒版妸鐖惰妭鎶婄埗鑺傜偣鍔犲埌鏁扮粍鍓嶉潰 + node.unshift(list[i].id); + return node; + } + } + } + }, -} + handleClick(row) { + this.isUpdate = true; + this.dialogFormVisible = true; + this.form.name = row.username; + this.form.roleName = row.roleName; + this.form.phone = row.phone; + this.form.id = row.id; + this.form.email = row.email; + this.form.organizationId = this.getParentsById( + this.options, + row.departmentId + ); + this.form.roleId = row.roleName; + this.form.age = row.age; + this.form.account = row.account; + }, + getTreeData() { + getOrganizationalApi().then((res) => { + this.options = res.data[0].children; + this.clearCascaderBlank(this.options); + }); + }, + getRoleList() { + get("/user/list").then((res) => { + console.log(`output->res`, res); + this.roleList = res.data; + }); + }, + }, + watch: { + dialogFormVisible: { + handler(newVal, oldVal) { + if (newVal == false) { + this.isUpdate = false; + this.form = {}; + this.$refs.form.resetFields(); + } else { + this.getRoleList(); + } + }, + }, + }, +}; </script> <style lang="scss" scoped> .personnel-main { - // width: 100%; // height: 100%; .page-header-search { @@ -229,7 +468,7 @@ background: #fff; padding: 20px 20px 10px 20px; - >div:nth-child(2) { + > div:nth-child(2) { display: flex; justify-content: end; margin: 10px 0; -- Gitblit v1.9.3