zs-mes-before.git

			@@ -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 表示当前行需要合并并push 一个 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>