From 2ef03d7a1b2b10284e72944fd53697fd92f145b7 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期二, 05 三月 2024 18:24:16 +0800 Subject: [PATCH] 1 --- src/views/productManage/silkRegisterForm/addPage.vue | 3 src/components/makepager/CommonSearch.vue | 2 src/views/employeeManage/employeeInfo/index.vue | 254 ++++++++++++++++++++++++++++++- src/views/employeeManage/employeeInfo/components/AddEmployee.vue | 182 ++++++++++++++++++++++ 4 files changed, 428 insertions(+), 13 deletions(-) diff --git a/src/components/makepager/CommonSearch.vue b/src/components/makepager/CommonSearch.vue index 0af4d23..3381b56 100644 --- a/src/components/makepager/CommonSearch.vue +++ b/src/components/makepager/CommonSearch.vue @@ -232,7 +232,7 @@ align-items: center; .left { display: flex; - width: 150px; + width: 300px; .download { width: 30px; height: 30px; diff --git a/src/views/employeeManage/employeeInfo/components/AddEmployee.vue b/src/views/employeeManage/employeeInfo/components/AddEmployee.vue new file mode 100644 index 0000000..d5d9149 --- /dev/null +++ b/src/views/employeeManage/employeeInfo/components/AddEmployee.vue @@ -0,0 +1,182 @@ +<template> + <el-dialog :close-on-click-modal="false" :visible.sync="islook" width="40rem" class="add-event-dialog" + @close="cancelMethod"> + <div slot="title" class="tac drawerHeader">{{ editRow.title }}浜哄憳</div> + <div class="dialog-content-box"> + <el-form class="form-box" ref="form" :rules="rules" :model="form" label-width="120px" label-position="right"> + <el-form-item label="鍛樺伐缂栫爜锛�" prop="id"> + <el-input v-model="form.id" placeholder="璇疯緭鍏�"></el-input> + </el-form-item> + <el-form-item label="浜哄憳濮撳悕锛�" prop="name"> + <el-input v-model="form.name" placeholder="璇疯緭鍏�"></el-input> + </el-form-item> + <el-form-item label="鎵嬫満鍙凤細" prop="phoneNum"> + <el-input v-model="form.phoneNum" placeholder="璇疯緭鍏�" maxlength="11" show-word-limit></el-input> + </el-form-item> + <el-form-item label="鍏ヨ亴鏃堕棿锛�" prop="date"> + <el-date-picker v-model="form.date" style="width:100%;" type="date" placeholder="閫夋嫨鏃ユ湡" + value-format="yyyy-MM-dd"> + </el-date-picker> + </el-form-item> + <el-form-item label="杞﹂棿锛�" prop="phoneNum"> + <el-select v-model="form.phoneNum" filterable placeholder="璇烽�夋嫨" style="width: 100%"> + <el-option v-for="item in DeviceList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="缁勫埆锛�" prop="phoneNum"> + <el-select v-model="form.phoneNum" filterable placeholder="璇烽�夋嫨" style="width: 100%"> + <el-option v-for="item in DeviceList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="宸ョ锛�" prop="phoneNum"> + <el-select v-model="form.phoneNum" filterable placeholder="璇烽�夋嫨" style="width: 100%"> + <el-option v-for="item in DeviceList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </el-form> + </div> + <div slot="footer" class="dialog-footer tac"> + <el-button type="cancel" @click="cancelMethod()">鍙栨秷</el-button> + <el-button type="primary" @click="submitForm('form')">纭畾</el-button> + </div> + </el-dialog> +</template> + +<script> +import { getDeleteFollowRecord } from "@/api/employeeManage/employeeInfo.js" +export default { + props: { + editRow: { + type: Object, + } + }, + data() { + return { + islook: false, + form: { + id: '', + name: '', + phoneNum: '', + }, + rules: { + id: [ + { + required: true, + message: "璇疯緭鍏ヤ汉鍛樺鍚�", + trigger: ["blur", "change"], + }, + ], + name: [ + { + required: true, + message: "璇疯緭鍏ュ憳宸ョ紪鐮�", + trigger: ["blur", "change"], + }, + ], + phoneNum: [ + { + required: false, + message: "璇疯緭鍏ユ墜鏈哄彿", + trigger: ["blur", "change"], + }, + { len: 11, message: "闀垮害鍦�11涓瓧绗�", trigger: "blur" }, + { + pattern: + /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, + message: "璇疯緭鍏ユ纭殑鎵嬫満鍙�", + trigger: ["blur", "change"], + }, + ], + }, + DeviceList: [], + }; + }, + created() { + }, + watch: { + islook(newVal) { + if (newVal) { + this.formInfo() + } + }, + editRow() { + this.formInfo() + }, + }, + methods: { + formInfo() { + if (this.islook) { + this.form = { + explain: "", + prefixId: "", + id: "", + number: 0, + remark: "", + status: "", + frockLife: "", + frockName: "", + vendor: "", + }; + this.$nextTick(()=>{ + this.$refs["form"].resetFields(); + if (this.editRow.id) { + this.form = JSON.parse(JSON.stringify(this.editRow)); + } + }) + } + }, + cancelMethod() { + this.$refs["form"].resetFields(); + this.islook = false; + }, + submitForm(formName) { + this.$refs[formName].validate((valid) => { + if (valid) { + let form = JSON.parse(JSON.stringify(this.form)); + if (this.editRow.type == "add") { + getDeleteFollowRecord(form).then((res) => { + if (res.code == 200) { + this.$message({ + message: "娣诲姞鎴愬姛锛�", + type: "success", + }); + this.cancelMethod(); + } + }); + } else { + getDeleteFollowRecord(form).then((res) => { + if (res.code == 200) { + this.$message({ + message: "缂栬緫鎴愬姛锛�", + type: "success", + }); + this.cancelMethod(); + } + }); + } + } else { + console.log('error submit!!'); + return false; + } + }); + }, + }, +}; +</script> + +<style lang="scss" scoped> +.dialog-content-box { + height: 28rem; + + .form-box { + width: 90%; + padding: 0 5%; + height: 100%; + overflow-y: auto; + + } +} +</style> diff --git a/src/views/employeeManage/employeeInfo/index.vue b/src/views/employeeManage/employeeInfo/index.vue index 6fbd61d..5579c07 100644 --- a/src/views/employeeManage/employeeInfo/index.vue +++ b/src/views/employeeManage/employeeInfo/index.vue @@ -1,21 +1,253 @@ <template> - <div class="container"></div> + <div class="silkRegister-form"> + <div class="filter"> + <div class="filter-card"> + <CommonSearch + :show-add="false" + :show-download="false" + :amount-view="false" + :show-action-btn="false" + placeholder="璇疯緭鍏ュ叧閿瘝" + @searchClick="onFilterSearch" + > + <template slot="leftButton"> + <el-button size="small" type="primary" @click="addBtnClick">鏂板</el-button> + </template> + </CommonSearch> + </div> + </div> + + <div class="body"> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + v-loading="loading" + :table-list="tableList" + @selTableCol="selTableCol" + > + <template slot="tableButton"> + <el-table-column label="鎿嶄綔" width="90" fixed="right"> + <template slot-scope="scope"> + <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button> + <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> + </template> + </el-table-column> + </template> + </TableCommonView> + </div> + <div class="btn-pager"> + <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + </div> + </div> + </div> + <AddEmployee ref="addEmployee" :editRow="editRow" @shutdown="shutdown" /> + </div> </template> <script> +import { getFollowRecordList, getDeleteFollowRecord } from "@/api/employeeManage/employeeInfo.js" +import pageMixin from "@/components/makepager/pager/mixin/pageMixin" +import AddEmployee from "@/views/employeeManage/employeeInfo/components/AddEmployee" export default { - name: "employeeInfo", - props: {}, - components: {}, - mixins: [], - computed: {}, - data() { - return {} + name: "SilkRegisterForm", + props: { }, - created() {}, - methods: {} + mixins: [pageMixin], + components: { + AddEmployee, + }, + data() { + return { + tableList: {}, + loading: false, + searchOptions: [], + editRow: { + title: "鏂板缓", + }, + search_map: {}, + tableColumn: [ + { label: "鍛樺伐缂栫爜", prop: "topic", min: 120, default: true }, // 涓婚 + { label: "濮撳悕", prop: "client_name", min: 190, }, // 瀹㈡埛鍚嶇О + { label: "鎵嬫満鍙�", prop: "contact_name", min: 130, }, // 鑱旂郴浜哄鍚� + { label: "杞﹂棿", prop: "client_status", min: 100 }, // 瀹㈡埛鐘舵�� + { label: "缁勫埆", prop: "contact_information_name", min: 100 }, // 鑱旂郴鏂瑰紡 + { label: "宸ョ", prop: "follow_time", min: 130 }, // 鑱旂郴浜烘棩鏈� + { label: "娣诲姞鏃堕棿", prop: "next_follow_time", min: 130 }, // 涓嬫鍥炶鏃ユ湡 + { label: "娣诲姞浜�", prop: "member_name", min: 110 }, // 璐熻矗浜� + ], + showCol: [ + "鍛樺伐缂栫爜", + "濮撳悕", + "鎵嬫満鍙�", + "杞﹂棿", + "缁勫埆", + "宸ョ", + "娣诲姞鏃堕棿", + "娣诲姞浜�", + ] + } + }, + created() { + this.setTable() + this.getData(this.search_map) + }, + computed: { + }, + methods: { + setTable() { + this.tableList = { + selectIndex: true, + tableInfomation: [], + allcol: [], + showcol: this.showCol, + tableColumn: this.setColumnVisible(this.showCol) + } + this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label) + this.searchOptions = [] + for (let i = 0; i < this.tableList.tableColumn.length; i++) { + const label = this.tableList.tableColumn[i].label + const value = this.tableList.tableColumn[i].prop + this.searchOptions.push({ value: value, label: label }) + } + }, + setColumnVisible(showCol) { + return this.tableColumn.map((ele) => { + return { + ...ele, + isShowColumn: showCol.includes(ele.label) + } + }) + }, + selTableCol(val) { + this.showcol = val + this.tableList.tableColumn = this.setColumnVisible(val) + }, + // 璇锋眰鏁版嵁 + async getData() { + this.loading = true + await getFollowRecordList({ + search_map: this.search_map, + page: this.pagerOptions.currPage, + pageSize: this.pagerOptions.pageSize + }) + .then((res) => { + console.log(res) + if (res.code === 200) { + if (res.data.list && res.data.list.length > 0) { + const list = res.data.list.map((item) => { + return { + ...item, + client_name: item.client.name, + contact_name: item.contact.name, + client_status: item.client_status.name, + phone: item.contact.phone, + member_name: item.member.username, + contact_information_name: item.contact_information.name + } + }) + this.tableList.tableInfomation = list || [] + this.pagerOptions.totalCount = res.data.count + } else { + this.tableList.tableInfomation = [] + } + } else { + this.tableList.tableInfomation = [] + } + this.loading = false + }) + .catch((err) => { + console.log(err) + this.tableList.tableInfomation = [] + this.loading = false + }) + }, + // 鎼滅储 + onFilterSearch(searchText) { + this.search_map.client_name = searchText ?? "" + this.pagerOptions.currPage = 1 + this.getData() + }, + shutdown() { + this.getData(); + }, + // 鏂板缓 + addBtnClick() { + this.editRow = { title:'鏂板缓',type:'add' } + this.$refs.addEmployee.islook = true; + }, + // 缂栬緫 + handleClick(row) { + let config=JSON.parse(JSON.stringify(row)); + this.editRow = { ...config, title:'缂栬緫',type:'add' } + this.$refs.addEmployee.islook = true; + }, + // 鍒犻櫎 + delClick(id) { + this.$confirm("鏄惁纭鍒犻櫎?", "璀﹀憡", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning" + }) + .then(() => { + getDeleteFollowRecord({ ids: [id] }).then((response) => { + if (response.code === 200) { + this.$message.success("鍒犻櫎鎴愬姛") + this.getData() + } else { + this.$message.warning("鍒犻櫎澶辫触") + } + }) + }) + .catch(() => {}) + }, + } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.silkRegister-form { + height: 100%; + overflow: hidden; + .filter { + height: 80px; + display: flex; + align-items: center; + padding: 12px 20px 0 20px; + &-card { + height: 80px; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 10px 20px; + flex: 1; + border-radius: 12px; + background-color: #fff; + } + } + .body { + box-sizing: border-box; + padding: 10px 20px; + border-radius: 12px; + height: calc(100% - 92px); + .body-card { + background-color: #fff; + border-radius: 12px; + height: 100%; + overflow: hidden; + } + .list-view { + height: calc(100% - 60px); + overflow: hidden; + } + .btn-pager { + display: flex; + margin-top: 10px; + .page { + margin-left: auto; + } + } + } +} +</style> diff --git a/src/views/productManage/silkRegisterForm/addPage.vue b/src/views/productManage/silkRegisterForm/addPage.vue index 7888dc9..10f1fad 100644 --- a/src/views/productManage/silkRegisterForm/addPage.vue +++ b/src/views/productManage/silkRegisterForm/addPage.vue @@ -558,12 +558,13 @@ } .list-view { - max-height: calc(100% - 90px); + max-height: calc(100% - 90px - 10px); overflow: hidden; } .form-box-b { width: 100%; height: 60px; + margin-top:10px; overflow: hidden; .form-item-two{ width:160px; -- Gitblit v1.8.0