From 0b9a9b4aa3051565b213b9efcb5e02ecbda0e791 Mon Sep 17 00:00:00 2001 From: Fixiaobai <fixiaobai@163.com> Date: 星期一, 04 九月 2023 15:22:35 +0800 Subject: [PATCH] Merge branch 'master' of http://192.168.73.113:9001/r/lims-before --- src/views/laboratory/personnel/index.vue | 803 +++++++++++++++++++++++++------------------------------- 1 files changed, 359 insertions(+), 444 deletions(-) diff --git a/src/views/laboratory/personnel/index.vue b/src/views/laboratory/personnel/index.vue index 4259f2f..ac88585 100644 --- a/src/views/laboratory/personnel/index.vue +++ b/src/views/laboratory/personnel/index.vue @@ -1,478 +1,393 @@ <template> - <div class="personnel-main"> - <div class="page-header-search"> - <div class="search-bar"> - <el-form ref="form" :inline="true"> - <el-form-item> - <el-input v-model="keyword" placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�"> - <i slot="prefix" class="el-input__icon el-icon-search" /> - </el-input> - </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="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-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" /> - </el-form-item> - <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" /> - </el-form-item> - <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" - 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()">{{ + <div class="personnel-main"> + <div class="page-header-search"> + <div class="search-bar"> + <el-form ref="form" :inline="true"> + <el-form-item> + <el-input v-model="keyword" placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�"> + <i slot="prefix" class="el-input__icon el-icon-search" /> + </el-input> + </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="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-dialog :title="isUpdate == true ? '鏇存柊浜哄憳淇℃伅' : '鏂板浜哄憳'" :visible.sync="dialogFormVisible" width="30%"> + <el-form :model="form" ref="form" :rules="rules" style="padding-right: 50px;"> + <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" /> + </el-form-item> + <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" /> + </el-form-item> + <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" 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="width: 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()">{{ isUpdate == true ? "鏇� 鏂�" : "纭� 瀹�" }}</el-button> - </div> - </el-dialog> - </div> - </div> - <div class="content-main"> - <div class="personner-table"> - <el-table - ref="personnerlTable" - height="calc(100vh - 240px)" - border - :cell-style="{ textAlign: 'center' }" - :header-cell-style="{ + </div> + </el-dialog> + </div> + </div> + <div class="content-main"> + <div class="personner-table"> + <el-table ref="personnerlTable" height="calc(100vh - 240px)" border :cell-style="{ textAlign: 'left' }" + :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"> - <template scope="scope"> - {{ + textAlign: 'left', + }" @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"> + <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"> - <template scope="scope"> - {{ + </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"> + <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"> - {{ + </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="[ + </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 - > - </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 - > - </template> - </el-table-column> - </el-table> - <div> - <!-- 鍒嗛〉鍣� --> - <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> - </div> + ]" 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> + </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> + </template> + </el-table-column> + </el-table> + <div> + <!-- 鍒嗛〉鍣� --> + <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> + </div> </template> <script> -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: "", - roleList: "", - personnerlTable: [], - filteredpersonnerlTable: [], - currentindex: 1, - currentPage: 1, // 褰撳墠椤电爜 - total: 0, // 鎬绘潯鏁� - pageSize: 100, // 姣忛〉鐨勬暟鎹潯鏁� - personData: [], // 鐢ㄦ潵瀛樻斁鎺ュ彛浼犺繃鏉ョ殑浜哄憳鍒楄〃鏁版嵁 - dialogFormVisible: false, - form: { - account: "", - age: "", - email: "", - name: "", - phone: "", - organizationId: "", - roleId: "", - }, - myProp: { - value: "id", - label: "department", - checkStrictly: true, //鍏佽閫夋嫨浠绘剰涓�鑺� - }, - formLabelWidth: "100px", - rules: { - account: [ - { - required: true, - message: "璇疯緭鍏ヨ处鍙�", - trigger: "blur", - }, - ], - name: [ - { - required: true, - message: "璇疯緭鍏ュ悕瀛�", - trigger: "blur", - }, - ], - phone: [ - // { required: true, message: '璇疯緭鍏�11浣嶇數璇濆彿鐮�', trigger: 'blur' }, - { - pattern: /^1[3456789]\d{9}$/, - message: "闈炴硶鎵嬫満鍙风爜", - trigger: ["blur", "change"], - }, - ], - email: [ - // { required: true, message: '璇疯緭鍏ラ偖绠卞湴鍧�', trigger: 'blur' }, - { - type: "email", - message: "闈炴硶閭鍦板潃", - trigger: ["blur", "change"], - }, - ], - organizationId: [ - { - required: true, - type: "array", - message: "璇烽�夋嫨閮ㄩ棬", - trigger: "change", - }, - ], - roleId: [ - { required: true, message: "璇疯緭鍏ユ潈闄�(0鎴�1)", trigger: "blur" }, - ], - }, - options: [], - status: "", - isUpdate: false, - }; - }, - mounted() { - this.getData(); - this.getTreeData(); - }, - methods: { - // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣 - handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉); - this.currentPage = 1; - this.pageSize = val; - }, - filterTag(value) { - this.status = ""; - this.status = value; - return true; - }, - // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤� - handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`); - this.currentPage = val; - }, - async getData() { - let data = { - pageNo: 0, - 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; - }, - searchData() { - this.filteredpersonnerlTable = this.personnerlTable.filter((item) => { - return item.username === this.keyword; - }); - this.personnerlTable = this.filteredpersonnerlTable; - }, - resetData() { - this.personnerlTable = this.personData; - this.keyword = ""; - this.status = ""; - this.getData(); - }, - // 鎻愪氦鏂板浜哄憳琛ㄥ崟 - submitForm() { - this.$refs.form.validate((valid) => { - if (valid) { - 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; - } - }); - }, - // 娓呯┖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; - } - } - } - }, + 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: "", + roleList: "", + personnerlTable: [], + filteredpersonnerlTable: [], + currentindex: 1, + currentPage: 1, // 褰撳墠椤电爜 + total: 0, // 鎬绘潯鏁� + pageSize: 100, // 姣忛〉鐨勬暟鎹潯鏁� + personData: [], // 鐢ㄦ潵瀛樻斁鎺ュ彛浼犺繃鏉ョ殑浜哄憳鍒楄〃鏁版嵁 + dialogFormVisible: false, + form: { + account: "", + age: "", + email: "", + name: "", + phone: "", + organizationId: "", + roleId: "", + }, + myProp: { + value: "id", + label: "department", + checkStrictly: true, //鍏佽閫夋嫨浠绘剰涓�鑺� + }, + formLabelWidth: "100px", + rules: { + account: [{ + required: true, + message: "璇疯緭鍏ヨ处鍙�", + trigger: "blur", + }, ], + name: [{ + required: true, + message: "璇疯緭鍏ュ悕瀛�", + trigger: "blur", + }, ], + phone: [ + // { required: true, message: '璇疯緭鍏�11浣嶇數璇濆彿鐮�', trigger: 'blur' }, + { + pattern: /^1[3456789]\d{9}$/, + message: "闈炴硶鎵嬫満鍙风爜", + trigger: ["blur", "change"], + }, + ], + email: [ + // { required: true, message: '璇疯緭鍏ラ偖绠卞湴鍧�', trigger: 'blur' }, + { + type: "email", + message: "闈炴硶閭鍦板潃", + trigger: ["blur", "change"], + }, + ], + organizationId: [{ + required: true, + type: "array", + message: "璇烽�夋嫨閮ㄩ棬", + trigger: "change", + }, ], + roleId: [{ + required: true, + message: "璇疯緭鍏ユ潈闄�(0鎴�1)", + trigger: "blur" + }, ], + }, + options: [], + status: "", + isUpdate: false, + }; + }, + mounted() { + this.getData(); + this.getTreeData(); + }, + methods: { + // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣 + handleSizeChange(val) { + this.currentPage = 1; + this.pageSize = val; + }, + filterTag(value) { + this.status = ""; + this.status = value; + return true; + }, + // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤� + handleCurrentChange(val) { + this.currentPage = val; + }, + async getData() { + let data = { + pageNo: 0, + 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; + }, + searchData() { + this.filteredpersonnerlTable = this.personnerlTable.filter((item) => { + return item.username === this.keyword; + }); + this.personnerlTable = this.filteredpersonnerlTable; + }, + resetData() { + this.personnerlTable = this.personData; + this.keyword = ""; + this.status = ""; + this.getData(); + }, + // 鎻愪氦鏂板浜哄憳琛ㄥ崟 + submitForm() { + this.$refs.form.validate((valid) => { + if (valid) { + 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 { + 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(); - } - }, - }, - }, -}; + 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) => { + 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 { - background: #fff; - display: flex; - justify-content: space-between; - padding: 0 24px 12px 24px; + .personnel-main { - .search-bar { - .el-form { - .el-form-item { - margin-bottom: 0px !important; + // width: 100%; + // height: 100%; + .page-header-search { + background: #fff; + display: flex; + justify-content: space-between; + padding: 20px 24px 12px 24px; - .el-input { - width: 360px; - } - } - } - } - } + .search-bar { + .el-form { + .el-form-item { + margin-bottom: 0px !important; - .personner-table { - background: #fff; - padding: 20px 20px 10px 20px; + .el-input { + width: 360px; + } + } + } + } + } - > div:nth-child(2) { - display: flex; - justify-content: end; - margin: 10px 0; - } - } -} -</style> + .personner-table { + background: #fff; + padding: 20px 20px 10px 20px; + + >div:nth-child(2) { + display: flex; + justify-content: end; + margin: 10px 0; + } + } + } +</style> \ No newline at end of file -- Gitblit v1.9.3