From 082b572b91abd0d5ae8e409714553130448aa6d1 Mon Sep 17 00:00:00 2001
From: 张涛 <“2538313560@qq.com”>
Date: 星期五, 30 八月 2024 17:25:44 +0800
Subject: [PATCH] fix：薪资调整
---
src/views/systemSetting/silkStandardSetting/components/silkTableList.vue | 503 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 295 insertions(+), 208 deletions(-)
diff --git a/src/views/systemSetting/silkStandardSetting/components/silkTableList.vue b/src/views/systemSetting/silkStandardSetting/components/silkTableList.vue
index 24a107d..34d5eb1 100644
--- a/src/views/systemSetting/silkStandardSetting/components/silkTableList.vue
+++ b/src/views/systemSetting/silkStandardSetting/components/silkTableList.vue
@@ -1,160 +1,201 @@
<template>
<div class="page-view">
- <el-form ref="form" :model="tableList" :show-message="false" label-position="right">
- <el-table
- ref="fromTable"
- :data="tableList.tableData"
- style="width: 100%"
- @selection-change="handleSelectionChange"
- :row-key="(row) => row.productId"
- :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '14px' }"
- border
- >
- <el-table-column v-if="selectBox" type="selection" :reserve-selection="true" width="40" align="center">
- </el-table-column>
- <el-table-column v-if="tableList.isReturn" type="index" label="#" width="50" align="center"></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"
- align="center"
- >
- <!-- 琛ㄥご鏍峰紡 -->
- <template slot="header">
- <span v-if="item.isRequird" style="color: #f56c6c">*</span>
- <span>{{ item.label }}</span>
- </template>
- <!-- column鏍峰紡 -->
- <template slot-scope="scope">
- <template v-if="detailEnter">
- <el-form-item
- v-if="item.input"
- label=" "
- :prop="'tableData.' + scope.$index + '.' + item.prop"
- :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
- >
- <el-input
- v-model.trim="scope.row[item.prop]"
- maxlength="50"
- size="mini"
- :disabled="!isOperate"
- @change="
- (val) => {
- commonInputChange(val, item.prop, scope.row, scope)
- }
- "
- ></el-input>
- </el-form-item>
- <el-form-item
- v-else-if="item.projectName"
- label=" "
- :prop="'tableData.' + scope.$index + '.' + item.prop"
- >
- <div class="custom-name">
- <el-select v-model="scope.row[item.prop]" clearable size="mini" placeholder="璇烽�夋嫨">
- <el-option
- v-for="(item, index) in projectOptions"
- :key="index"
- :label="item.value"
- :value="item.value"
- >
- </el-option>
- </el-select>
- <div class="common-select-btn" @click="clearupClient(scope)">
+ <div class="top-box">
+ <div class="table-box" :style="{ width: detailEnter ? '95%' : '100%' }">
+ <el-form ref="form" :model="tableList" :show-message="false" label-position="right">
+
+ <el-table
+ ref="fromTable"
+ v-if="tableShow"
+ :data="tableList.tableData"
+ style="width: 100%"
+ @selection-change="handleSelectionChange"
+ :row-key="(row) => row.productId"
+ :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '14px' }"
+ border
+ >
+ <el-table-column v-if="selectBox" type="selection" :reserve-selection="true" width="40" align="center">
+ </el-table-column>
+ <el-table-column
+ v-if="tableList.isReturn"
+ type="index"
+ label="#"
+ width="50"
+ align="center"
+ ></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"
+ align="center"
+ >
+ <!-- 琛ㄥご鏍峰紡 -->
+ <template slot="header">
+ <span v-if="item.isRequird" style="color: #f56c6c">*</span>
+ <div v-else-if="item.addColumn" class="add-column-box">
+ <el-input
+ placeholder="璇疯緭鍏�"
+ v-model="item.label"
+ size="mini"
+ clearable
+ @change="
+ (val) => {
+ addColumnInputChange(val, item.prop)
+ }
+ "
+ ></el-input>
+ <div class="common-select-btn" @click="clearupColumn(item.prop,i)">
<i class="el-icon-remove" title="鍒犻櫎"></i>
</div>
</div>
- </el-form-item>
- <el-form-item
- v-else-if="item.inputNumber"
- label=" "
- :prop="'tableData.' + scope.$index + '.' + item.prop"
- :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
- >
- <el-input-number
- v-model="scope.row[item.prop]"
- placeholder=""
- :min="0"
- :controls="false"
- :disabled="!isOperate"
- size="mini"
- style="width: 100%; margin-right: 5px"
- @change="
- (val) => {
- commonInputChange(val, item.prop, scope.row, scope)
- }
- "
- ></el-input-number>
- </el-form-item>
- <el-form-item
- v-else-if="item.inputFloat"
- label=" "
- :prop="'tableData.' + scope.$index + '.' + item.prop"
- :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
- >
- <el-input-number
- v-model="scope.row[item.prop]"
- placeholder=""
- :min="0"
- :precision="4"
- :disabled="!isOperate"
- :controls="false"
- size="mini"
- style="width: 100%; margin-right: 5px"
- @change="
- (val) => {
- commonInputChange(val, item.prop, scope.row, scope)
- }
- "
- ></el-input-number>
- </el-form-item>
- <span v-else>
- <template>
- {{ scope.row[item.prop] }}
+ <span v-else @click="editColumnInput(item,i, item.prop)">{{ item.label||'--' }}</span>
+ </template>
+ <!-- column鏍峰紡 -->
+ <template slot-scope="scope">
+ <template v-if="detailEnter">
+ <el-form-item
+ v-if="item.input"
+ label=" "
+ :prop="'tableData.' + scope.$index + '.' + item.prop"
+ :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
+ >
+ <el-input
+ v-model.trim="scope.row[item.prop]"
+ maxlength="50"
+ size="mini"
+ :disabled="!isOperate"
+ @change="
+ (val) => {
+ commonInputChange(val, item.prop, scope)
+ }
+ "
+ ></el-input>
+ </el-form-item>
+ <el-form-item
+ v-else-if="item.projectName"
+ label=" "
+ :prop="'tableData.' + scope.$index + '.' + item.prop"
+ >
+ <div class="custom-name">
+ <el-select v-model="scope.row[item.prop]" clearable size="mini" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="(item, index) in projectOptions"
+ :key="index"
+ :label="item.value"
+ :value="item.id"
+ >
+ </el-option>
+ </el-select>
+ <div class="common-select-btn" @click="clearupClient(scope)">
+ <i class="el-icon-remove" title="鍒犻櫎"></i>
+ </div>
+ </div>
+ </el-form-item>
+ <el-form-item
+ v-else-if="item.inputNumber"
+ label=" "
+ :prop="'tableData.' + scope.$index + '.' + item.prop"
+ :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
+ >
+ <el-input-number
+ v-model="scope.row[item.prop]"
+ placeholder=""
+ :min="0"
+ :controls="false"
+ :disabled="!isOperate"
+ size="mini"
+ style="width: 100%; margin-right: 5px"
+ @change="
+ (val) => {
+ commonInputChange(val, item.prop, scope.row, scope)
+ }
+ "
+ ></el-input-number>
+ </el-form-item>
+ <el-form-item
+ v-else-if="item.inputFloat"
+ label=" "
+ :prop="'tableData.' + scope.$index + '.' + item.prop"
+ :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
+ >
+ <el-input-number
+ v-model="scope.row[item.prop]"
+ placeholder=""
+ :min="0"
+ :precision="4"
+ :disabled="!isOperate"
+ :controls="false"
+ size="mini"
+ style="width: 100%; margin-right: 5px"
+ @change="
+ (val) => {
+ commonInputChange(val, item.prop, scope.row, scope)
+ }
+ "
+ ></el-input-number>
+ </el-form-item>
+ <span v-else>
+ <template>
+ {{ scope.row[item.prop] }}
+ </template>
+ </span>
</template>
- </span>
- </template>
- <el-form-item
- v-else-if="item.inputNumber && selectBox"
- label=" "
- :prop="'tableData.' + scope.$index + '.' + item.prop"
- :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
- >
- <el-input-number
- v-model="scope.row[item.prop]"
- placeholder=""
- :min="0"
- :controls="false"
- :disabled="!isOperate"
- size="mini"
- style="width: 100%; margin-right: 5px"
- @change="
- (val) => {
- commonInputChange(val, item.prop, scope.row, scope)
- }
- "
- ></el-input-number>
- </el-form-item>
- <span v-else style="text-align: right">{{ scope.row[item.prop] }}</span>
- </template>
- </el-table-column>
- <el-table-column label="鎿嶄綔" width="80" v-if="detailEnter" align="center">
- <template slot-scope="scope">
- <el-button type="text" size="small" :disabled="!isOperate" @click="deleteClick(scope)">鍒犻櫎</el-button>
- </template>
- </el-table-column>
- <slot name="tableButton" />
- <div slot="empty">
- <el-empty description="鏆傛棤鏁版嵁"></el-empty>
- </div>
- </el-table>
- </el-form>
- <div v-if="detailEnter" style="margin: 10px">
- <div class="add-btn-box" @click="add">
+ <el-form-item
+ v-else-if="item.inputNumber && selectBox"
+ label=" "
+ :prop="'tableData.' + scope.$index + '.' + item.prop"
+ :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
+ >
+ <el-input-number
+ v-model="scope.row[item.prop]"
+ placeholder=""
+ :min="0"
+ :controls="false"
+ :disabled="!isOperate"
+ size="mini"
+ style="width: 100%; margin-right: 5px"
+ @change="
+ (val) => {
+ commonInputChange(val, item.prop, scope.row, scope)
+ }
+ "
+ ></el-input-number>
+ </el-form-item>
+ <div v-else-if="item.isCallMethod">
+ <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{
+ item.getCallMethod(scope.row[item.prop], scope.row)
+ }}</span>
+ </div>
+ <span v-else style="text-align: right">{{ scope.row[item.prop] }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="80" v-if="!detailEnter" align="center">
+ <template slot-scope="scope">
+ <el-button type="text" size="small" :disabled="!isOperate" @click="deleteClick(scope)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ <slot name="tableButton" />
+ <div slot="empty">
+ <el-empty description="鏆傛棤鏁版嵁"></el-empty>
+ </div>
+ </el-table>
+ </el-form>
+ </div>
+ <div
+ v-if="detailEnter"
+ class="add-column-box"
+ @click="addColumnClick"
+ :style="{ width: detailEnter ? '40px' : '0px' }"
+ >
<i class="el-icon-circle-plus"></i>
+ </div>
+ </div>
+ <div v-if="detailEnter" style="margin: 10px">
+ <div class="add-btn-box">
+ <i class="el-icon-circle-plus" @click="addRowClick"></i>
</div>
<!-- <el-button size="small" type="primary" :disabled="!isOperate" @click="add">鏂板</el-button> -->
<!-- <el-button size="small" type="primary" disabled>瀵煎叆鏄庣粏</el-button> -->
@@ -164,6 +205,7 @@
<script>
// import { getProductList } from "@/api/common/other"
+import { getDataByType } from "@/api/data"
export default {
name: "CommmonFormTableView",
components: {},
@@ -196,6 +238,11 @@
type: Boolean,
default: true
},
+ // 鏄惁鍙互缂栬緫琛ㄥご
+ isEdit: {
+ type: Boolean,
+ default: false
+ },
silkTableList: {
type: Object,
default: () => {
@@ -216,13 +263,8 @@
productList: [],
tableList: [],
projectIndex: 0,
- projectOptions: [
- { id: 1, value: "绾ゅ害鍋忓樊" },
- { id: 2, value: "浜屾鍙樺寲" },
- { id: 3, value: "娓呮磥鍒�" },
- { id: 4, value: "娲佸噣鍒�" },
- { id: 5, value: "鏈�澶у亸宸�" }
- ]
+ projectOptions: getDataByType("projectOptions"),
+ tableShow:true,
}
},
created() {
@@ -237,7 +279,18 @@
this.getTableInfo()
},
immediate: true
- }
+ },
+ 'silkTableList.tableColumn': {
+ handler() {
+ this.tableShow=false;
+ this.$nextTick(()=>{
+ this.tableShow=true;
+ this.$forceUpdate()
+ })
+
+ },
+ immediate: true
+ },
},
computed: {},
methods: {
@@ -249,29 +302,13 @@
this.isRecalculate = true
}
},
- // 浜у搧鍚嶇О
- // async getProductList() {
- // await getProductList({
- // productName: "",
- // productNumber: "",
- // page: 1,
- // pageSize: 100
- // }).then((res) => {
- // console.log(res, "浜у搧鍚嶇О")
- // if (res.code === 200) {
- // if (res.data.data && res.data.data.length > 0) {
- // this.productList = res.data.data
- // }
- // }
- // })
- // },
// 澶氶��
handleSelectionChange(val) {
this.$emit("getSelectArray", val)
},
// 鏂板
- add() {
+ addRowClick() {
if (this.addTypeIdMultiple) {
this.projectIndex = this.tableList.tableData.length
this.editSelCommonConfig.title = "浜у搧鍚嶇О"
@@ -281,36 +318,47 @@
this.$emit("addProjectClick")
}
},
- commonInputChange(val, prop, row, scope) {
- this.$emit("inputContent", val, prop, row, scope)
+ commonInputChange(val, prop, scope) {
+ this.$emit("inputContent", val, prop, scope)
},
// 鍒犻櫎
deleteClick(scope) {
- this.tableList.tableData.splice(scope.$index, 1)
- this.$forceUpdate()
- this.$message.success("鍒犻櫎鎴愬姛锛�")
- this.$emit("deleteClick", scope)
- },
- // 鏂板
- selClientClick(scope, prop) {
- console.log(scope, prop)
- this.projectIndex = scope.$index
- this.editSelCommonConfig.title = "浜у搧鍚嶇О"
- this.editSelCommonConfig.isSelectBox = true
- this.editSelCommonConfig.editVisible = true
- },
- // 缂栬緫
- handleEditClient(scope, prop) {
- console.log(scope, prop)
- this.projectIndex = scope.$index
- this.editSelCommonConfig.title = "浜у搧鍚嶇О"
- this.editSelCommonConfig.isSelectBox = false
- this.editSelCommonConfig.editVisible = true
+ this.$emit("clearupProject", this.tableList.tableData, scope.$index)
},
// 鍒犻櫎
clearupClient(scope) {
this.$emit("clearupProject", this.tableList.tableData, scope.$index)
+ },
+ // 娣诲姞鍒楁寜閽�
+ addColumnClick() {
+ this.$emit("addColumnClick")
+ },
+ // 娣诲姞鍒楀ご閮ㄦ爣棰樿緭鍏�
+ addColumnInputChange(val, prop) {
+ console.log(val, prop, "娣诲姞鍒楀ご閮ㄦ爣棰樿緭鍏�")
+ this.$emit("addColumnInputChange", val, prop)
+ },
+ editColumnInput(item,i,prop){
+ if(prop.indexOf('prop')!=-1&&this.isEdit){
+ item.addColumn=true;
+ this.$set(this.tableList.tableColumn[i],'addColumn',true)
+ this.$forceUpdate()
+ this.$emit("editColumnInput", item, i,prop)
+ }
+ },
+ // 鍒犻櫎鍒�
+ clearupColumn(prop,index) {
+ console.log(prop)
+ this.$emit("clearupColumn", prop,index)
}
+ },
+ //瑙ｅ喅琛ㄦ牸鎶栧姩闂
+ beforeUpdate() {
+ this.$nextTick(() => {
+ if(this.$refs["fromTable"]){
+ this.$refs["fromTable"].doLayout()
+ }
+ })
}
}
</script>
@@ -318,23 +366,49 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
- .el-form-item {
- margin-bottom: 0;
- .custom-name {
- display: flex;
- .common-select-btn {
- margin-left: 5px;
- font-size: 18px;
- cursor: pointer;
- color: #ff0000;
+ .top-box {
+ display: flex;
+ .table-box {
+ flex: 1;
+ .el-form-item {
+ margin-bottom: 0;
+ .custom-name {
+ display: flex;
+ .common-select-btn {
+ margin-left: 5px;
+ font-size: 18px;
+ cursor: pointer;
+ color: #ff0000;
+ }
+ }
}
+ }
+ .add-column-box {
+ // width: 40px;
+ margin-top: 10px;
+ font-size: 26px;
+ color: #5582f3;
+ margin-left: 20px;
+ cursor: pointer;
}
}
.add-btn-box {
font-size: 26px;
color: #5582f3;
margin-left: 50px;
- cursor: pointer;
+ .el-icon{
+ cursor: pointer;
+ padding:5px;
+ }
+ }
+ .add-column-box {
+ display: flex;
+ .common-select-btn {
+ margin-left: 5px;
+ font-size: 18px;
+ cursor: pointer;
+ color: #ff0000;
+ }
}
}
::v-deep {
@@ -353,9 +427,22 @@
.el-table th.el-table__cell > .cell {
padding: 0 5px;
}
+ .el-table th.el-table__cell > .cell {
+ span{
+ width:100%;
+ display:inline-block;
+ }
+ }
+ .el-table__cell{
+ padding: 5px 0 !important;
+ height: 35px;
+ }
+ .el-input__suffix{
+ text-align:right;
+ }
.el-input__inner {
// text-align: left;
- text-align: center !important;
+ // text-align: center !important;
}
}
</style>
--
Gitblit v1.8.0