| | |
| | | <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)" :disabled="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 |
| | | // props: ["tableTreeData"], |
| | | data() { |
| | | return { |
| | | checkType(row) { |
| | | if (row.paramType == '数值格式') { |
| | | let val = row.paramValue |
| | | const reg = /^[0-9]*$/ |
| | | if (!reg.test(val)) { |
| | | row.paramValue = '' |
| | | this.$message.warning("请输入数值格式的数据!") |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | 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 '' |
| | | } |
| | | } |
| | | mergeObj: {}, |
| | | mergeArr: ['code','paramItem', 'paramItemTwo',], |
| | | tableData: [], |
| | | // routingTemplateId: null |
| | | } |
| | | }, |
| | | created(){ |
| | | 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 '' |
| | | } |
| | | } |
| | | }, |
| | | 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() |
| | | }, |
| | |
| | | //动态合并方法 |
| | | 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) |
| | | }) |
| | |
| | | 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; |
| | | }) |
| | | }) |
| | | }, |
| | |
| | | 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 |
| | |
| | | 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 |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | </script> |
| | | |
| | | <style> |
| | | .avue-crud__menu{ |
| | | .avue-crud__menu { |
| | | display: none; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <!-- <paramMergeTemplate :key="isShowTree" :tableTreeData="paramData" :routingTemplateId="routingTemplateId"/> --> |
| | | <component |
| | | :is="paramMergeTemplate" |
| | | :key="isShowTree" |
| | | :tableTreeData="paramData" |
| | | :routingTemplateId="routingTemplateId" |
| | | ></component> |
| | | </div> |
| | | <!-- <paramMergeTemplate |
| | | :tableData="paramData" |
| | | :page="{}" |
| | | > |
| | | </paramMergeTemplate> --> |
| | | <component |
| | | <!-- <component |
| | | :is="paramMergeTemplate" |
| | | :key="isShowTree" |
| | | :tableData="paramData" |
| | | :routingTemplateId="routingTemplateId" |
| | | ></component> |
| | | ></component> --> |
| | | <!-- <el-table :data="paramData" class="l-mes" height="600"> |
| | | <el-table-column |
| | | label="参数项" |
| | |
| | | return { |
| | | paramMergeTemplate: '', |
| | | itemKey: '', |
| | | isShowTree: false, |
| | | typeOptions: [], |
| | | paramTemplateSelArr: [], |
| | | paramTemplateSelCol: 'operationTemplateNo', |
| | |
| | | }, |
| | | // 参数集模板点击事件 |
| | | templateRowClick(row) { |
| | | if(this.isShowTree){ |
| | | this.isShowTree=false |
| | | }else{ |
| | | this.isShowTree=true |
| | | } |
| | | console.log(this.isShowTree); |
| | | this.paramData=[] |
| | | this.getRoutingTemplateParam(row.id) |
| | | }, |
| | | // 根据工艺、工序id、模板id去获取模板下的参数 |
| | |
| | | }) |
| | | ).then((response) => { |
| | | if (response.data.data.length > 0) { |
| | | this.paramData = [] |
| | | this.paramData = response.data.data |
| | | this.paramMergeTemplate = 'paramMergeTemplate' |
| | | } else { |
| | |
| | | * https://cli.vuejs.org/zh/config/ |
| | | */ |
| | | //const url = 'http://ztt-gateway:9999' |
| | | const url = 'http://192.168.0.15:9999' |
| | | const url = 'http://ztt-gateway:9999' |
| | | const localUrl = 'http://localhost:8089' |
| | | //const localUrl = 'http://10.88.15.95:8089' |
| | | const CompressionWebpackPlugin = require('compression-webpack-plugin') |