eln_TD
/
eln_web
9
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat:[模板管理][暂存]

lkf
luojie 1 month ago
parent
ff219b3b55
commit
f2d0e624b3
4 changed files with 90 additions and 52 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +68
    -46
      src/components/Template/CustomTable.vue
  2. +3
    -0
      src/components/Template/HandleFormItem.vue
  3. +17
    -4
      src/views/business/comps/template/comps/yp/YP003.vue
  4. +2
    -2
      vue.config.js

+ 68
- 46
src/components/Template/CustomTable.vue View File

@ -1,6 +1,6 @@
<template>
<div>
<div class="custom-table-wrapper" :class="{'no-border': !isBorder}">
<div class="custom-table-wrapper" :class="{ 'no-border': !isBorder }">
<div class="custom-table-header" v-if="isBorder">
<div class="custom-table-row">
<div v-if="showSort" class="custom-table-cell header-cell sort-cell">
@ -19,8 +19,9 @@
:error="hasError(-1, index, col.headerSelectKey)"
@update:error="onErrorUpdate(-1, index, col.headerSelectKey, $event)" />
</template>
<div v-else-if="headerSelectFields[col.headerSelectKey]" class="fill-type-icon" :style="{ width: (templateFillType !== 'actFill')? '60px' : 'auto' }">({{
headerSelectFields[col.headerSelectKey] }})</div>
<div v-else-if="headerSelectFields[col.headerSelectKey]" class="fill-type-icon"
:style="{ width: (templateFillType !== 'actFill') ? '60px' : 'auto' }">({{
headerSelectFields[col.headerSelectKey] }})</div>
</div>
@ -42,7 +43,7 @@
<div v-for="(col, colIndex) in columns" :key="colIndex" class="custom-table-cell body-cell"
:style="getCellWidth(col)">
<div class="inner-table-cell">
<div class="flex1" :class="{'item-center': !isBorder && col.label}">
<div class="flex1" :class="{ 'item-center': !isBorder && col.label }">
<div v-if="!isBorder && col.label" class="mr-5">
{{ $t(col.label) }}
</div>
@ -54,7 +55,7 @@
@change="onBodyValueChange(rowIndex, colIndex, $event)"
:error="hasError(rowIndex, colIndex, col.prop)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
@beforeSaveRecord = "(data,callback)=>beforeSaveRecord(data,callback,rowIndex, col,row)"
@beforeSaveRecord="(data, callback) => beforeSaveRecord(data, callback, rowIndex, col, row)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
</template>
<template v-else-if="col.bodyType === 'inputNumber'">
@ -65,7 +66,7 @@
@blur="onBlur(rowIndex, col.prop, $event)"
@change="onBodyValueChange(rowIndex, colIndex, $event)"
:error="hasError(rowIndex, colIndex, col.prop)"
@beforeSaveRecord = "(data,callback)=>beforeSaveRecord(data,callback,rowIndex, col,row)"
@beforeSaveRecord="(data, callback) => beforeSaveRecord(data, callback, rowIndex, col, row)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
</template>
@ -75,7 +76,7 @@
:fieldItemLabel="fieldItemLabel" type="select" class="body-select"
@blur="onBlur(rowIndex, col.prop, $event)"
:item="getBodyItem(col, rowIndex)" v-model="row[col.prop]"
@change="onBodyValueChange(rowIndex, colIndex, $event,row,'select')"
@change="onBodyValueChange(rowIndex, colIndex, $event, row, 'select')"
:error="hasError(rowIndex, colIndex, col.prop)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
@ -93,14 +94,13 @@
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
</div>
<div class="flex flex1" v-else-if="isRegent(col,'bodyType')">
<div class="flex flex1" v-else-if="isRegent(col, 'bodyType')">
<HandleFormItem :fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex"
:fieldItemLabel="fieldItemLabel" :type="col.bodyType" class="body-clickable"
sourceFrom = "customTable"
:item="getBodyItem(col, rowIndex)" :value="row[col.prop]"
:error="hasError(rowIndex, colIndex, col.prop)"
@onRegentSubmit="(data,inputValue)=>onRegentSubmit(data,inputValue,col, rowIndex, colIndex, row)"
@beforeReagentSubmit="(data, callback)=>onBeforeReagentSubmit(data, callback,col,row)"
sourceFrom="customTable" :item="getBodyItem(col, rowIndex)"
:value="row[col.prop]" :error="hasError(rowIndex, colIndex, col.prop)"
@onRegentSubmit="(data, inputValue) => onRegentSubmit(data, inputValue, col, rowIndex, colIndex, row)"
@beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, col, row)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
</div>
@ -130,14 +130,14 @@
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.otherCode)" />
</div>
</div>
<div class="m-l-5 flex1" v-if="isShowBodySub(col, row)">
<div class="m-l-5" :class="{'flex1':col.bodySubType !== 'button'}" v-if="isShowBodySub(col, row)">
<template v-if="col.bodySubType === 'inputNumber'">
<HandleFormItem :fieldKey="prefixKey + '_' + col.bodySubKey + '_' + rowIndex"
:fieldItemLabel="fieldItemLabel" type="inputNumber"
@blur="onSubBlur(rowIndex, col.bodySubKey, $event)"
@copy="onCopy(rowIndex, col)" :item="getBodySubItem(col)"
v-model="row[col.bodySubKey]"
@change="onBodySubValueChange(rowIndex, colIndex,$event,)"
@change="onBodySubValueChange(rowIndex, colIndex, $event,)"
:error="hasError(rowIndex, colIndex, col.bodySubKey)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.bodySubKey)" />
@ -148,7 +148,7 @@
@blur="onSubBlur(rowIndex, col.bodySubKey, $event)"
@copy="onCopy(rowIndex, col)" :item="getBodySubItem(col)"
v-model="row[col.bodySubKey]"
@change="onBodySubValueChange(rowIndex, colIndex,$event,)"
@change="onBodySubValueChange(rowIndex, colIndex, $event,)"
:error="hasError(rowIndex, colIndex, col.bodySubKey)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.bodySubKey)" />
@ -158,7 +158,7 @@
:fieldItemLabel="fieldItemLabel" type="select" class="body-select"
@blur="onSubBlur(rowIndex, col.bodySubKey, $event)"
:item="getBodySubItem(col, rowIndex)" v-model="row[col.bodySubKey]"
@change="onBodySubValueChange(rowIndex, colIndex, $event,row,'select')"
@change="onBodySubValueChange(rowIndex, colIndex, $event, row, 'select')"
:error="hasError(rowIndex, colIndex, col.bodySubKey)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.bodySubKey)" />
@ -169,12 +169,18 @@
{{ row[col.bodySubKey] }}
</div>
</template>
<template v-else-if="col.bodySubType === 'button'">
<HandleFormItem class="ml-10" type="button" :item="getBodyButtonItem(col, rowIndex)"
:value="row[col.bodySubKey]"
@clickButton="(e, data) => handleClickButton(e, data, col.bodySubKey, rowIndex, colIndex)" />
</template>
</div>
</div>
</div>
<!-- 默认操作栏 -->
<div class="custom-table-cell body-cell" :style="{ width: isBorder ? '245px' : 'auto' }" v-if="showOperation">
<div class="custom-table-cell body-cell" :style="{ width: isBorder ? '245px' : 'auto' }"
v-if="showOperation">
<div class="inner-table-cell">
<slot name="operation" :row="row" :rowIndex="rowIndex" :columns="getOperationColumns()">
</slot>
@ -300,14 +306,17 @@ export default {
this.oldLocalDataSource = [];
},
methods: {
beforeSaveRecord(data,callback,rowIndex, col,row){
this.$emit("beforeSaveRecord", {inputData:data, callback,rowIndex, key:col.prop, rowData:row,dataSource:this.localDataSource})
handleClickButton(e, data, key, rowIndex, colIndex) {
this.$emit("clickButton", key, rowIndex, colIndex, e, data,)
},
beforeSaveRecord(data, callback, rowIndex, col, row) {
this.$emit("beforeSaveRecord", { inputData: data, callback, rowIndex, key: col.prop, rowData: row, dataSource: this.localDataSource })
},
getCellWidth(col){
const {templateFillType} = this;
getCellWidth(col) {
const { templateFillType } = this;
let width = col.width ? col.width + 'px' : 'auto';
if(templateFillType !== "actFill" && templateFillType !== "preFill"){
width = (col.showWidth)?col.showWidth + 'px' :(col.width ? col.width + 'px' : 'auto')
if (templateFillType !== "actFill" && templateFillType !== "preFill") {
width = (col.showWidth) ? col.showWidth + 'px' : (col.width ? col.width + 'px' : 'auto')
}
return { width }
},
@ -348,18 +357,18 @@ export default {
}
this.$emit("clickable", col, rowIndex, row)
},
onBeforeReagentSubmit(data, callback, col, row){
onBeforeReagentSubmit(data, callback, col, row) {
if (this.templateFillType !== 'actFill') {
return
}
this.$emit("beforeReagentSubmit", {selectData:data, callback, key:col.prop, rowData:row})
this.$emit("beforeReagentSubmit", { selectData: data, callback, key: col.prop, rowData: row })
},
onRegentSubmit(data, inputValue, col, rowIndex, colIndex, row){
onRegentSubmit(data, inputValue, col, rowIndex, colIndex, row) {
if (this.templateFillType !== 'actFill') {
return
}
this.updateDataSourceByRowIndex(rowIndex,{[col.prop]:inputValue})
this.$emit("onRegentSubmit", {selectInfo:data,key:col.prop, col, rowIndex, colIndex, rowData:row})
this.updateDataSourceByRowIndex(rowIndex, { [col.prop]: inputValue })
this.$emit("onRegentSubmit", { selectInfo: data, key: col.prop, col, rowIndex, colIndex, rowData: row })
},
isShowAddRos() {
if (this.showAddRow !== undefined) {
@ -374,7 +383,7 @@ export default {
if (this.isValueEmpty(this.localDataSource[rowIndex][col.copyFrom])) {//没有值就不用复制了
return
}
this.updateDataSourceByRowIndex(rowIndex,{[col.prop]:this.localDataSource[rowIndex][col.copyFrom]},"clickable")
this.updateDataSourceByRowIndex(rowIndex, { [col.prop]: this.localDataSource[rowIndex][col.copyFrom] }, "clickable")
this.onBlur(rowIndex, col.prop, this.localDataSource[rowIndex][col.prop]);
}
},
@ -526,7 +535,7 @@ export default {
this.headerSelectFields[col.headerSelectTo] = value;
}
this.headerSelectFields[col.headerSelectKey] = value;
this.$emit('headerSelectChange', {key:col.headerSelectKey, headerSelectFields:this.headerSelectFields,dataSource:this.localDataSource});
this.$emit('headerSelectChange', { key: col.headerSelectKey, headerSelectFields: this.headerSelectFields, dataSource: this.localDataSource });
// 输入时清除对应表单项的错误状态
this.formErrors = this.formErrors.filter(error =>
!(error.rowIndex === -1 &&
@ -588,7 +597,7 @@ export default {
},
// 表体值变化
onBodyValueChange(rowIndex, colIndex, value,row,type) {
onBodyValueChange(rowIndex, colIndex, value, row, type) {
const col = this.columns[colIndex];
this.localDataSource[rowIndex][col.prop] = value;
@ -601,12 +610,12 @@ export default {
error.colIndex === colIndex &&
error.field === col.prop)
);
if(type === "select"){
this.$emit('bodySelectChange', {rowIndex,item:row, colIndex, value,key:col.prop,dataSource:this.localDataSource,headerSelectFields:this.headerSelectFields});
if (type === "select") {
this.$emit('bodySelectChange', { rowIndex, item: row, colIndex, value, key: col.prop, dataSource: this.localDataSource, headerSelectFields: this.headerSelectFields });
}
},
// 表体子值变化
onBodySubValueChange(rowIndex, colIndex, value,row,type) {
onBodySubValueChange(rowIndex, colIndex, value, row, type) {
const col = this.columns[colIndex];
this.localDataSource[rowIndex][col.bodySubKey] = value;
@ -629,8 +638,8 @@ export default {
error.colIndex === colIndex &&
error.field === col.bodySubKey)
);
if(type === "select"){
this.$emit('bodySelectChange', {rowIndex,item:row, colIndex, value,key:col.bodySubKey,dataSource:this.localDataSource,headerSelectFields:this.headerSelectFields});
if (type === "select") {
this.$emit('bodySelectChange', { rowIndex, item: row, colIndex, value, key: col.bodySubKey, dataSource: this.localDataSource, headerSelectFields: this.headerSelectFields });
}
},
getHeaderItem(col) {
@ -651,13 +660,20 @@ export default {
copyFrom: col.copyFrom || "",
compareTo: col.compareTo, // 添加 compareTo 字段
type: col.bodyType || "input",
filledCodes:col.filledCodes,
filledCodes: col.filledCodes,
};
if (col.bodyDisabled) {
item.disabled = col.bodyDisabled;
}
return item
},
getBodyButtonItem(col,) {
return {
buttonName: col.bodySubButtonName,
fillType: col.bodySubFillType,
type: "button",
}
},
getBodySubItem(col) {
const item = {
fillType: col.bodySubFillType,
@ -719,7 +735,7 @@ export default {
targetStartSolutionVolumePrecision: 3,//小数点精度默认为3
});
},
// 添加行
addRow(row = {}) {
this.localDataSource.push(row);
@ -779,7 +795,7 @@ export default {
}
}
this.$emit("blur", { rowIndex, colKey, value,dataSource:this.localDataSource,headerSelectFields:this.headerSelectFields, item: this.localDataSource[rowIndex] });
this.$emit("blur", { rowIndex, colKey, value, dataSource: this.localDataSource, headerSelectFields: this.headerSelectFields, item: this.localDataSource[rowIndex] });
},
onSubBlur(rowIndex, colKey, value) {
// 查找对应的列配置
@ -810,13 +826,16 @@ export default {
font-size: 14px;
color: #606266;
margin-top: 20px;
&.no-border {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 5px 5px;
border: none;
.custom-table-cell {
border-right: none;
}
.custometable-row {
display: flex;
border-bottom: none;
@ -885,7 +904,7 @@ export default {
text-align: left;
vertical-align: middle;
border-right: 1px solid #ebeef5;
page-break-inside: avoid;
page-break-inside: avoid;
box-sizing: border-box;
}
@ -897,15 +916,15 @@ export default {
color: #909399;
background-color: #f5f7fa;
font-size: 12px;
word-break: break-word;
white-space: normal;
word-break: break-word;
white-space: normal;
}
.body-cell {
color: #606266;
page-break-inside: avoid;
page-break-inside: avoid;
background-color: #fff;
}
@ -980,14 +999,17 @@ export default {
.body-span {
text-align: center;
}
.item-center {
display: flex;
align-items: center;
}
.mr-5{
.mr-5 {
margin-right: 5px;
}
.sort-cell{
.sort-cell {
text-align: center;
width: 100px;
}

+ 3
- 0
src/components/Template/HandleFormItem.vue View File

@ -927,6 +927,9 @@ export default {
}
if(this.type === "button"){
this.$emit('clickButton', this.item,this.inputValue,data);
if(this.templateFillType === "preFill"){
return;
}
}
//用户输入密码并点击确定，保存修改
this.oldValue = value; // 更新旧值

+ 17
- 4
src/views/business/comps/template/comps/yp/YP003.vue View File

@ -19,6 +19,7 @@
:formData="formData"
:prefixKey = "`table`"
fieldItemLabel = "template.common.operationSteps"
@clickButton="handleClickButton"
:showOperation="fillType === 'preFill'"
>
<template slot="operation" slot-scope="{ row, rowIndex, columns }">
@ -34,9 +35,6 @@
</div>
</div>
<!-- <button @click="onSave">保存</button> -->
<el-button type="primary" @click="showImportExcelDialog">{{ $t('template.common.importTemplate')
}}</el-button>
<ImportExcelDialog ref="ImportExcelDialog" @onLoadData="onLoadExcelData" :downloadArr="['动物编号']" @downloadExcelTemplate="downloadExcelTemplate" />
</div>
</template>
@ -166,8 +164,13 @@ export default {
},{
label: 'template.yp.yp003.dwbh',
prop: 'dwbh',
bodyType: 'input',
bodyType: 'checkboxTag',
bodyFillType: 'actFill',
bodySubType:"button",
bodySubFillType:"preFill",
bodySubButtonName:"template.common.importTemplate",
bodySubKey:"exportBtn",
showBodySub:true,
width: 280,
},{
label: 'template.yp.yp003.ypsl',
@ -181,11 +184,19 @@ export default {
data() {
return {
formData: {},
currentRowIndex: -1,
};
},
mounted() {
},
methods: {
// 点击按钮
handleClickButton(key,rowIndex,colIndex,e,data){
if(key === "exportBtn"){
this.currentRowIndex = rowIndex;
this.$refs.ImportExcelDialog.show()
}
},
//获取已填写的表单数据
getFilledFormData() {
return this.getFilledFormDataByRefs(["baseInfoRef", "tableRef", "stepRef", "remarkRef"])
@ -221,6 +232,8 @@ export default {
},
onLoadExcelData(excelData) {
console.log(excelData)
const data = excelData.splice(1);
this.$refs.tableRef.updateDataSourceByRowIndex(this.currentRowIndex,data);
this.$refs.ImportExcelDialog.cancel()
},
downloadExcelTemplate(arr){

+ 2
- 2
vue.config.js View File

@ -34,8 +34,8 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
// target: `http://39.99.251.173:8080`,
// target: `http://localhost:8080`,
target: `http://39.99.251.173:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''

Write Preview
Loading…
Cancel
Save