From 7d960355fd82a106ae8e15f6f83d4324145e7b24 Mon Sep 17 00:00:00 2001
From: Fixiaobai <fixiaobai@163.com>
Date: 星期五, 10 十一月 2023 09:51:46 +0800
Subject: [PATCH] modified: src/views/common/param-mergeTemplate.vue modified: src/views/technology/routing/routing-form.vue
---
src/views/common/param-mergeTemplate.vue | 419 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 247 insertions(+), 172 deletions(-)
diff --git a/src/views/common/param-mergeTemplate.vue b/src/views/common/param-mergeTemplate.vue
index 511206f..2e7a21f 100644
--- a/src/views/common/param-mergeTemplate.vue
+++ b/src/views/common/param-mergeTemplate.vue
@@ -1,166 +1,241 @@
<template>
- <div>
- <avue-crud
- ref="crud"
- class="l-mes"
- rowKey="oneId"
- :data="tableData"
- :option="option"
- :span-method="spanMethod"
- :page="page"
- :table-loading="loading"
- >
- <template slot="code" slot-scope="scope">
- <avue-text-ellipsis use-tooltip :text="scope.row.code" :height="40" :width="100">
- <small slot="more">...</small>
- </avue-text-ellipsis>
- </template>
+ <div>
+ <avue-crud ref="crud" class="l-mes" rowKey="oneId" :data="tableData" :option="option" :span-method="spanMethod"
+ :page="page" :table-loading="loading">
+ <template slot="code" slot-scope="scope">
+ <avue-text-ellipsis use-tooltip :text="scope.row.code" :height="40" :width="100">
+ <small slot="more">...</small>
+ </avue-text-ellipsis>
+ </template>
<template slot="paramValue" slot-scope="scope">
- <el-input @blur="checkType(scope.row)" :readonly="routingTemplateId!=null" :placeholder="'璇疯緭鍏�'+scope.row.paramType" v-model="scope.row.paramValue"/>
+ <el-input @blur="checkType(scope.row)" :readonly="routingTemplateId != null"
+ :placeholder="'璇疯緭鍏�' + scope.row.paramType" v-model="scope.row.paramValue" />
</template>
</avue-crud>
- </div>
+ <!-- <el-table :data="tableData" ref="commonTree" :span-method="objectSpanMethod" border row-key="id" style="width: 100%">
+ <el-table-column prop="code" label="缂栫爜"></el-table-column>
+ <el-table-column prop="paramItem" label="涓�绾�"></el-table-column>
+ <el-table-column prop="paramItemTwo" label="浜岀骇"></el-table-column>
+ <el-table-column prop="paramItemThree" label="涓夌骇"></el-table-column>
+ <el-table-column prop="paramType" label="绫诲瀷"></el-table-column>
+ <el-table-column prop="paramValue" label="鍊�"></el-table-column>
+ <el-table-column prop="unit" label="鍗曚綅"></el-table-column>
+ </el-table> -->
+ </div>
</template>
<script>
export default {
- props:{
- option:{
- type: Object,
- default: ()=>{
- return {
- height: 600,
- loadingText: "鍔犺浇涓�...",
- columnBtn: false,
- index: true,
- indexLabel: '搴忓彿',
- menu: false,
- menuAlign: 'center',
- editBtn: false,
- delBtn: false,
- addBtn: false,
- border: true,
- size: 'small',
- refreshBtn: false,
- align: 'center',
- column: [
- {
- label: '鍙傛暟缂栧彿',
- prop: 'code',
- slot: true
- },
- {
- label: '鍙傛暟椤�',
- prop: 'paramItem',
- },
- {
- label: '浜岀骇鍙傛暟',
- prop: 'paramItemTwo',
- },
- {
- label: '涓夌骇鍙傛暟',
- prop: 'paramItemThree',
- },
- {
- label: '鍙傛暟绫诲瀷',
- prop: 'paramType',
- formslot: true,
- rules: [{
- required: true,
- message: "璇烽�夋嫨鍙傛暟绫诲瀷",
- trigger: "change"
- }]
- },
- {
- label: '鍊�',
- prop: 'paramValue',
- slot: true,
- formslot: true,
- labelslot: true
- }, {
- label: '鍗曚綅',
- prop: 'unit',
- rules: [{
- required: true,
- message: "鍗曚綅涓嶈兘涓虹┖",
- trigger: "blur"
- }]
- },]
- }
- }
- },
- tableData:{
- type: Array,
- default: () => {
- return []
- },
- required: true
- },
- loading:{
- type: Boolean,
- default: false
- },
- page:{
- type: Object,
- default:()=>{
- return {
- total: 10,
- currentPage: 1,
- pageSize: 10
- }
- }
- },
- spanArr:{
- type: Array,
- default: ()=>{
- return [{
- prop: 'code',
- span: []
- }, {
- prop: 'paramItem',
- span: []
- }, {
- prop: 'paramItemTwo',
- span: []
- }]
- }
- },
- routingTemplateId:{
- type: String,
- default: ()=>{
- return ''
- }
- }
- },
- created(){
- // this.rowSort()
- // this.rowCalc()
- },
- beforeMount(){
- this.rowSort()
- this.rowCalc()
- },
- mounted(){
- },
- data(){
+ // props: ["tableTreeData"],
+ data() {
return {
- checkType(row){
- if(row.paramType == '鏁板�兼牸寮�'){
+ checkType(row) {
+ if (row.paramType == '鏁板�兼牸寮�') {
let val = row.paramValue
const reg = /^[0-9]*$/
- if(!reg.test(val)){
+ if (!reg.test(val)) {
row.paramValue = ''
this.$message.warning("璇疯緭鍏ユ暟鍊兼牸寮忕殑鏁版嵁锛�")
}
}
+ },
+ mergeObj: {},
+ mergeArr: ['code','paramItem', 'paramItemTwo',],
+ tableData: [],
+ // routingTemplateId: null
+ }
+ },
+ props: {
+ option: {
+ type: Object,
+ default: () => {
+ return {
+ height: 600,
+ loadingText: "鍔犺浇涓�...",
+ columnBtn: false,
+ index: true,
+ indexLabel: '搴忓彿',
+ menu: false,
+ menuAlign: 'center',
+ editBtn: false,
+ delBtn: false,
+ addBtn: false,
+ border: true,
+ size: 'small',
+ refreshBtn: false,
+ align: 'center',
+ column: [
+ {
+ label: '鍙傛暟缂栧彿',
+ prop: 'code',
+ slot: true
+ },
+ {
+ label: '鍙傛暟椤�',
+ prop: 'paramItem',
+ },
+ {
+ label: '浜岀骇鍙傛暟',
+ prop: 'paramItemTwo',
+ },
+ {
+ label: '涓夌骇鍙傛暟',
+ prop: 'paramItemThree',
+ },
+ {
+ label: '鍙傛暟绫诲瀷',
+ prop: 'paramType',
+ formslot: true,
+ rules: [{
+ required: true,
+ message: "璇烽�夋嫨鍙傛暟绫诲瀷",
+ trigger: "change"
+ }]
+ },
+ {
+ label: '鍊�',
+ prop: 'paramValue',
+ slot: true,
+ formslot: true,
+ labelslot: true
+ }, {
+ label: '鍗曚綅',
+ prop: 'unit',
+ rules: [{
+ required: true,
+ message: "鍗曚綅涓嶈兘涓虹┖",
+ trigger: "blur"
+ }]
+ },]
+ }
+ }
+ },
+ tableTreeData: {
+ type: Array,
+ default: () => {
+ return []
+ },
+ required: true
+ },
+ loading: {
+ type: Boolean,
+ default: false
+ },
+ page: {
+ type: Object,
+ default: () => {
+ return {
+ total: 10,
+ currentPage: 1,
+ pageSize: 10
+ }
+ }
+ },
+ spanArr: {
+ type: Array,
+ default: () => {
+ return [{
+ prop: 'code',
+ span: []
+ }, {
+ prop: 'paramItem',
+ span: []
+ }, {
+ prop: 'paramItemTwo',
+ span: []
+ }]
+ }
+ },
+ routingTemplateId: {
+ type: String,
+ default: () => {
+ return ''
}
}
},
- methods:{
+ watch:{
+ tableTreeData:{
+ handler(old,newval){
+ console.log(this.tableTreeData);
+ this.tableData=JSON.parse(JSON.stringify(this.tableTreeData))
+ // this.getSpanArr(this.tableData);
+ this.rowSort()
+ this.rowCalc()
+ },
+ deep: true
+ }
+ },
+ created() {
+ // this.$nextTick(() => {
+ // this.$refs.crud.doLayout()
+ // })
+ this.tableData=JSON.parse(JSON.stringify(this.tableTreeData))
+ this.rowSort()
+ this.rowCalc()
+ },
+ beforeMount() {
+ // this.rowSort()
+ // this.rowCalc()
+ // this.$nextTick(()=>{
+
+
+ // })
+ },
+ beforeDestroy() {
+
+ },
+ mounted() {
+
+ },
+ activated(){
+ this.doLayout()
+ },
+ methods: {
+ doLayout(){
+ let that=this
+ this.$nextTick(()=>{
+ that.$refs.commonTree.dolayout()
+ })
+ },
+ getSpanArr(data) {
+ this.mergeArr.forEach((key, index1) => {
+ let count = 0; // 鐢ㄦ潵璁板綍闇�瑕佸悎骞惰鐨勮捣濮嬩綅缃�
+ this.mergeObj[key] = []; // 璁板綍姣忎竴鍒楃殑鍚堝苟淇℃伅
+ data.forEach((item, index) => {
+ // index == 0琛ㄧず鏁版嵁涓虹涓�琛岋紝鐩存帴 push 涓�涓� 1
+ if(index === 0) {
+ this.mergeObj[key].push(1);
+ } else {
+ // 鍒ゆ柇褰撳墠琛屾槸鍚︿笌涓婁竴琛屽叾鍊肩浉绛� 濡傛灉鐩哥瓑 鍦� count 璁板綍鐨勪綅缃叾鍊� +1 琛ㄧず褰撳墠琛岄渶瑕佸悎骞� 骞秔ush 涓�涓� 0 浣滀负鍗犱綅
+ if(item[key] === data[index - 1][key]) {
+ this.mergeObj[key][count] += 1;
+ this.mergeObj[key].push(0);
+ } else {
+ // 濡傛灉褰撳墠琛屽拰涓婁竴琛屽叾鍊间笉鐩哥瓑
+ count = index; // 璁板綍褰撳墠浣嶇疆
+ this.mergeObj[key].push(1); // 閲嶆柊push 涓�涓� 1
+ }
+ }
+ })
+ })
+ },
+ // 榛樿鎺ュ彈鍥涗釜鍊� { 褰撳墠琛岀殑鍊�, 褰撳墠鍒楃殑鍊�, 琛岀殑涓嬫爣, 鍒楃殑涓嬫爣 }
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+ // 鍒ゆ柇鍒楃殑灞炴��
+ if(this.mergeArr.indexOf(column.property) !== -1) {
+ // 鍒ゆ柇鍏跺�兼槸涓嶆槸涓�0
+ if(this.mergeObj[column.property][rowIndex]) {
+ return [this.mergeObj[column.property][rowIndex], 1]
+ } else {
+ // 濡傛灉涓�0鍒欎负闇�瑕佸悎骞剁殑琛�
+ return [0, 0];
+ }
+ }
+ },
//鍔ㄦ�佸悎骞舵柟娉�
rowCalc() {
this.spanArr.forEach((ele, index) => {
- let parent
+ let parent = null
if (index !== 0) parent = this.spanArr[ele.parent || index - 1].span
ele.span = this.rowSpan(ele.prop, parent)
})
@@ -170,17 +245,17 @@
this.spanArr.forEach((ele, index) => {
let key = ele.prop
this.tableData = this.tableData.sort((a, b) => {
- let flag = true;
- for (let i = 0; i < index; i++) {
- let prop = this.spanArr[i].prop
- flag = flag && a[prop] == b[prop]
- }
- if (flag) {
- if (a[key] < b[key]) { return 1; }
- else if (a[key] > b[key]) { return -1; }
+ let flag = true;
+ for (let i = 0; i < index; i++) {
+ let prop = this.spanArr[i].prop
+ flag = flag && a[prop] == b[prop]
+ }
+ if (flag) {
+ if (a[key] < b[key]) { return 1; }
+ else if (a[key] > b[key]) { return -1; }
+ return 0;
+ }
return 0;
- }
- return 0;
})
})
},
@@ -189,21 +264,21 @@
let position = 0;
this.tableData.forEach((item, index) => {
if (index === 0) {
- list.push(1)
- let position = 0;
- } else {
- if (this.tableData[index][key] === this.tableData[index - 1][key]) {
- if (parent && parent[index] !== 0) {
list.push(1)
- position = index
+ let position = 0;
+ } else {
+ if (this.tableData[index][key] === this.tableData[index - 1][key]) {
+ if (parent && parent[index] !== 0) {
+ list.push(1)
+ position = index
+ } else {
+ list[position] += 1;
+ list.push(0)
+ }
} else {
- list[position] += 1;
- list.push(0)
+ list.push(1)
+ position = index
}
- } else {
- list.push(1)
- position = index
- }
}
})
return list
@@ -212,12 +287,12 @@
for (let i = 0; i < this.spanArr.length; i++) {
const ele = this.spanArr[i]
if (column.property == ele.prop) {
- const _row = ele.span[rowIndex];
- const _col = _row > 0 ? 1 : 0;
- return {
- rowspan: _row,
- colspan: _col
- }
+ const _row = ele.span[rowIndex];
+ const _col = _row > 0 ? 1 : 0;
+ return {
+ rowspan: _row,
+ colspan: _col
+ }
}
}
}
@@ -226,7 +301,7 @@
</script>
<style>
- .avue-crud__menu{
+.avue-crud__menu {
display: none;
- }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3