From fc188397419e76da8e97c0782599f757fb34bd30 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期四, 14 十二月 2023 16:13:26 +0800 Subject: [PATCH] 增加编码规范功能及新建供应商和采购页面增加编码 --- src/components/makepager/TableCommonView.vue | 274 ++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 190 insertions(+), 84 deletions(-) diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue index be81c3c..42f2469 100644 --- a/src/components/makepager/TableCommonView.vue +++ b/src/components/makepager/TableCommonView.vue @@ -9,8 +9,9 @@ :height="'calc(100% - 0px)'" :max-height="tableList.maxHeight" :lazy="tableList.lazy" + size="mini" @selection-change="handleSelectionChange" - :header-cell-style="{ background: '#f1f3f8', color: '#000009' }" + :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '14px' }" :highlight-current-row="tableList.highlight" :row-class-name="tableRowClassName" @row-click="tableRowClick" @@ -18,84 +19,98 @@ :default-expand-all="tableList.isDefaultExpandAll" :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" > - <el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column> - <el-table-column v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"> </el-table-column> - <el-table-column - v-for="(item, i) in tableList.tableColumn" - :key="i" - :prop="item.prop" - :label="item.label" - :width="item.width" - :min-width="item.min" - show-overflow-tooltip - :sortable="item.sortable" - > - <template slot-scope="scope"> - <span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span> - <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div> - <span v-else-if="item.isTime">{{ - dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26" - ? "--" - : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) - }}</span> - <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selCommonClick(scope.row)">{{ - scope.row[item.prop] - }}</span> - <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "鏄�" : "鍚�" }}</span> - <span - v-else-if="item.isCommonClick && scope.row[item.prop]" - class="sel-name" - @click="selCommonClick(scope.row)" - >{{ scope.row[item.prop] }}</span - > - <div v-else-if="item.isProductName" class="product-view"> - <ul v-if="scope.row.products && scope.row.products.length > 0"> - <li v-for="(item, index) in scope.row.products" :key="index"> - <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> - {{ item.name }} - </div> - </li> - </ul> - <div v-else class="no-product">{{ "--" }}</div> - </div> - <div v-else-if="item.isProductAmount" class="product-view"> - <ul v-if="scope.row.products && scope.row.products.length > 0"> - <li v-for="(item, index) in scope.row.products" :key="index"> - <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> - {{ item.amount }} - </div> - </li> - </ul> - <div v-else class="no-product">{{ "--" }}</div> - </div> - <div v-else-if="item.isProductPrice" class="product-view"> - <ul v-if="scope.row.products && scope.row.products.length > 0"> - <li v-for="(item, index) in scope.row.products" :key="index"> - <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> - {{ item.price }} - </div> - </li> - </ul> - <div v-else class="no-product">{{ "--" }}</div> - </div> - <div v-else-if="item.isProductTotal" class="product-view"> - <ul v-if="scope.row.products && scope.row.products.length > 0"> - <li v-for="(item, index) in scope.row.products" :key="index"> - <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> - {{ item.total }} - </div> - </li> - </ul> - <div v-else class="no-product">{{ "--" }}</div> - </div> - <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span> - </template> + <el-table-column align="center" v-if="tableList.selectBox" type="selection" width="40"> </el-table-column> + <el-table-column align="center" v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"> </el-table-column> + <template v-for="(item, i) in tableList.tableColumn"> + <el-table-column + align="center" + :key="i" + :prop="item.prop" + :label="item.label" + :width="item.width" + :min-width="item.min" + show-overflow-tooltip + :sortable="item.sortable" + v-if="item.isShowColumn" + > + <template slot-scope="scope"> + <span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span> + <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div> + <span v-else-if="item.isTime">{{ + dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26" + ? "--" + : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) + }}</span> + <span + v-else-if="item.isClick && scope.row[item.prop]" + class="sel-name" + @click="selCommonClick(scope.row)" + >{{ scope.row[item.prop] }}</span + > + <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "鏄�" : "鍚�" }}</span> + <span + v-else-if="item.isCommonClick && scope.row[item.prop]" + class="sel-name" + @click="selCommonClick(scope.row)" + >{{ scope.row[item.prop] }}</span + > + <div v-else-if="item.isProductName" class="product-view"> + <ul v-if="scope.row.products && scope.row.products.length > 0"> + <li v-for="(item, index) in scope.row.products" :key="index"> + <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> + {{ item.name }} + </div> + </li> + </ul> + <div v-else class="no-product">{{ "--" }}</div> + </div> + <div v-else-if="item.isProductAmount" class="product-view"> + <ul v-if="scope.row.products && scope.row.products.length > 0"> + <li v-for="(item, index) in scope.row.products" :key="index"> + <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> + {{ item.amount }} + </div> + </li> + </ul> + <div v-else class="no-product">{{ "--" }}</div> + </div> + <div v-else-if="item.isProductPrice" class="product-view"> + <ul v-if="scope.row.products && scope.row.products.length > 0"> + <li v-for="(item, index) in scope.row.products" :key="index"> + <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> + {{ item.price }} + </div> + </li> + </ul> + <div v-else class="no-product">{{ "--" }}</div> + </div> + <div v-else-if="item.isProductTotal" class="product-view"> + <ul v-if="scope.row.products && scope.row.products.length > 0"> + <li v-for="(item, index) in scope.row.products" :key="index"> + <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> + {{ item.total }} + </div> + </li> + </ul> + <div v-else class="no-product">{{ "--" }}</div> + </div> + <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span> + </template> + </el-table-column> + </template> <slot name="tableButton" /> <div slot="empty"> <el-empty description="鏆傛棤鏁版嵁"></el-empty> </div> </el-table> + <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div> + <div class="styleBtn"> + <i @click="checkCol()" class="label">...</i> + <el-checkbox-group v-model="showcol" v-show="iscolopen" class="checkbox-group" @change="selectCheckBoxList"> + <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox> + </el-checkbox-group> + </div> </div> </template> @@ -110,6 +125,9 @@ selectBox: false, selectIndex: false, tableInfomation: [], // 鎺ュ彛杩斿洖鏁版嵁 + showcol: [], + allcol: [], + highlight: false, tableColumn: [ // table琛ㄥ崟 { label: "", prop: "", min: 200, tooltip: true } @@ -137,11 +155,30 @@ } }, data() { - return {} + return { + iscolopen: false, + showcol: [] + } + }, + watch: { + "tableList.showcol": { + handler(newVal) { + this.showcol = newVal + }, + immediate: true + } }, computed: {}, - mounted() {}, methods: { + onMaskClick() { + this.iscolopen = false + }, + checkCol() { + this.iscolopen = !this.iscolopen + }, + selectCheckBoxList(val) { + this.$emit("selTableCol", val) + }, handleReserve(row) { return row._id ? row._id : row.id }, @@ -276,6 +313,10 @@ selCommonClick(row) { this.$emit("selCommonClick", row) }, + // 琛岀偣鍑� + tableRowClick(row, column, event) { + this.$emit("tableRowClick", row, column, event) + }, // 鍗曢�夎鐩稿叧 tableRowClassName({ row }) { if (Object.keys(this.selectClassRow).length > 0) { @@ -284,9 +325,6 @@ } } this.$emit("tableRowClassName", row) - }, - tableRowClick(row) { - this.$emit("tableRowClick", row) } } } @@ -296,8 +334,9 @@ <style lang="scss" scoped> .table-view { // margin-top: 20px; - margin-right: 10px; + // margin-right: 10px; // margin-bottom: 40px; + position: relative; height: 100%; .blue { width: 70px; @@ -337,11 +376,78 @@ background-color: #fff; font-weight: bold; } - // .cell{ - // &:nth-last-child(3){ - // text-align:right; - // } - // } + } +} + +::v-deep .el-table .cell { + font-size: 12px; + line-height: 17px; + font-family: PingFangSC; + color: rgba(0, 0, 0, 0.9); + .el-button--text { + width: auto; + height: auto; + font-family: PingFangSC-Medium, sans-serif; + } +} +::v-deep .el-table .el-table__cell { + padding: 6px 0 !important; + height: 35px; + text-align: center; +} + +::v-deep { + .el-table .cell .el-button--text.el-button--small { + padding: 4px 0; + } + .el-table .onSelect { + background: #ebf2ff; + } +} + +.overSpread1 { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0); + z-index: 10; +} + +.styleBtn { + position: absolute; + width: 30px; + height: 36px; + // line-height: 26px; + // background: #06c062; + top: 0; + right: 2px; + z-index: 9999; + .label { + position: absolute; + top: 6px; + font-size: 20px; + // line-height: 5px; + cursor: pointer; + color: #000; + transform: rotate(-90deg); + } + .checkbox-group { + width: 160px; + height: 330px; + overflow: auto; + display: flex; + flex-direction: column; + line-height: 25px; + background: #ffffff; + border-radius: 16px; + padding: 12px; + position: absolute; + right: 0; + top: 30px; + z-index: 99; + box-shadow: 0 0 2px 2px #f8f8f8; } } </style> -- Gitblit v1.8.0