From 76af4acbe9df51d4524fbe3039d10158c3a15bcc Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期四, 29 二月 2024 18:13:55 +0800 Subject: [PATCH] 纤度登记表,纤度检验表的前端开发 --- src/views/productManage/silkRegisterForm/index.vue | 261 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 250 insertions(+), 11 deletions(-) diff --git a/src/views/productManage/silkRegisterForm/index.vue b/src/views/productManage/silkRegisterForm/index.vue index 21ef008..32a406d 100644 --- a/src/views/productManage/silkRegisterForm/index.vue +++ b/src/views/productManage/silkRegisterForm/index.vue @@ -1,21 +1,260 @@ <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> + <el-button size="small" type="primary" @click="printClick">鎵撳嵃</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> + </div> </template> <script> +import { getFollowRecordList, getDeleteFollowRecord } from "@/api/productManage/silkRegisterForm.js" +import pageMixin from "@/components/makepager/pager/mixin/pageMixin" + export default { - name: "silkRegisterForm", - props: {}, - components: {}, - mixins: [], - computed: {}, - data() { - return {} + name: "SilkRegisterForm", + props: { }, - created() {}, - methods: {} + mixins: [pageMixin], + components: { + }, + data() { + return { + tableList: {}, + loading: false, + searchOptions: [], + editConfig: { + visible: false, + title: "鏂板缓", + infomation: {} + }, + search_map: {}, + tableColumn: [ + { label: "缂栧彿", prop: "topic", min: 120, default: true }, // 涓婚 + { label: "钀戒笣鏃堕棿", prop: "client_name", min: 190, }, // 瀹㈡埛鍚嶇О + { label: "杞︾粍", prop: "contact_name", min: 100, }, // 鑱旂郴浜哄鍚� + { 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() + }, + // 鏂板缓 + addBtnClick() { + this.editConfig.title = "鏂板缓" + this.editConfig.infomation = { contact_name:"",sales_leads_name:"",sale_chance_name:""} + this.editConfig.visible = true + }, + // 鎵撳嵃 + printClick(){ + + }, + // 缂栬緫 + handleClick(row) { + console.log(row) + this.editConfig.title = "缂栬緫" + let config=JSON.parse(JSON.stringify(row)); + config.client_status_id=config.client_status_id?config.client_status_id:null + config.contact_information_id=config.contact_information_id?config.contact_information_id:null + this.editConfig.infomation = { ...config, sale_chance_name:row.sale_chance.name, sales_leads_name: "" } + this.editConfig.visible = 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> -- Gitblit v1.8.0