hxgksystemapp/.history/src/views/opk/asd/news/yg_20231023085020.vue

<!--
@ 作者: 鲁智强
@ 时间: 2023-08-15 11:34:38
@ 备注: 
-->
<template>
	<el-dialog :model-value="true" title="查看方案详情" @close="handleClose">
		<el-table :data="tablea" border label-width="120px" class="demo-ruleForm" :span-method="objectSpanMethod" style="width:100%">
			<el-table-column prop="dimensionname" label="考核维度"/>
			<el-table-column prop="dimensionstandard" label="维度权重"/>
			<el-table-column label="考核指标">
				<template #default="scope">
					<a v-if="scope.row.attribute == 1" style="color:#409eff" @click="cancelDialog(scope.row)">{{scope.row.targetname}}</a	>
					<a v-if="scope.row.attribute == 2">{{scope.row.targetname}}</a>
				</template>
			</el-table-column>
			<el-table-column prop="Targetstandard" label="权重指标"/>
			<el-table-column prop="content" label="说明"/>
			<el-table-column prop="unit" label="单位"/>
			<el-table-column prop="state" label="指标状态">
				<template #default="scope">
					<span v-if="scope.row.state== 1" class="el-tag">月</span>
					<span v-if="scope.row.state== 2" class="el-tag el-tag--warning">季度</span>
					<span v-if="scope.row.state== 3" class="el-tag el-tag--warning el-tag--light">年</span>
				</template>
			</el-table-column>
			<el-table-column prop="cycle" label="周期">
				<template #default="scope">
					<span v-if="scope.row.cycle== 4" class="el-tag">使用</span>
					<span v-if="scope.row.cycle== 5" class="el-tag">禁用</span>
					<span v-if="scope.row.cycle== 6" class="el-tag">观察</span>
				</template>
			</el-table-column>
			<el-table-column prop="cycle" label="频次"/>
			<el-table-column fixed="right" label="执行人" width="200">
				<template #default="{ row }">
					<el-button type="primary" link @click="handleio(row)"><el-icon><View /></el-icon>查看</el-button>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<template #default="{ row }">
					<el-button type="primary" link @click="handleErd(row)"><el-icon><EditPen /></el-icon>修改</el-button>
					<el-button type="primary" link @click="handleDel(row)"><el-icon><Delete /></el-icon>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<Xd v-if="data.xdPostBox" v-model="data.xdPostBox" :row-info="rowInfo"></Xd>	
		<Hyr v-if="data.hyrPostBox" v-model="data.hyrPostBox" :row-info="rowInfo"></Hyr>	
		<Ycy v-if="data.ycyPostBox" v-model="data.ycyPostBox" :row-info="rowInfo"></Ycy>	
	</el-dialog>
  </template>
  <script lang="ts" setup>
  import { reactive } from "vue";
  import {tarlist,addPostCont,addtarget,getgroupuser,addposttargetcont,search_orgpost,organdpost} from '@/api/opk/api'
  import {editPostCont} from '@/api/opk/pulic/api'
  import { ge_add } from '@/api/opk/news/api'
  import {look_scheme} from '@/api/opk/opk/api'
  import { create_scheme,ge_copy,del_scheme } from '@/api/opk/zxy/news/api'
  import Xd from './xd.vue'
  import Hyr from './hyr.vue'
  import Ycy from './ycy.vue'
const isshow = ref(false)
const props= defineProps( {
	  title: {
		type: String,
		default: "",
	  },
	  ygPostBox: {
		type: Boolean,
		default: false,
	  },
	  rowInfo: {
		type: Object,
		default() {
		  return {};
		},
	  },
	  arrayNum: {
		type: Number,
		default: 0,
	  },
	});
const orgTreeProps ={
   label: 'name',
}
const orgTreeProp = {
	label:'title',
	children:'children'
}
const data = reactive({
	xdPostBox:false,
	hyrPostBox:false,
	ycyPostBox:false,
})
// eslint-disable-next-line vue/no-dupe-keys
const rowInfo = ref<any>({})
const emit = defineEmits(["update:ygPostBox","editRow","addRow"])
const formData = reactive({
	deaprtname:"",
	year:"",
	asd:[] as string[],
})
const tablea = ref<any>([])
function ge_adds(){
	const yui = props.rowInfo.key
	look_scheme({id:yui})
	    .then((data) => {
        	tablea.value = data.data;
        }).finally(()=>{
			isshow.value = false
		})
	}
ge_adds()
  // 关闭弹窗
 const handleClose = ()=> {
    emit("update:ygPostBox", false);
  }
  const handleio = (val:any)=>{
	data.xdPostBox = true,
	rowInfo.value = val
  }
  const handleErd = (val:any)=>{
	data.hyrPostBox = true,
	rowInfo.value = val
  }
  const handleDel = (val:any) => {
  		ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
    		confirmButtonText: "确认",
    		cancelButtonText: "取消",
    		type: "warning",
  		})
		  .then(() => {
				const delid = new String(val.id)
				del_scheme({orgid:val.orgid,planversionkey:val.plantversion,targetid:val.targetid})
				ge_adds()
			})
}
const cancelDialog = (val:any)=>{
	data.ycyPostBox=true,
	rowInfo.value =val
}
// 合并
computeCell(tableBody) {
      // 循环遍历表体数据
      for (let i = 0; i < tableBody.length; i++) {
        if (i == 0) {
          // 先设置第一项
          this.cellList.push(1); // 初为1，若下一项和此项相同，就往cellList数组中追加0
          this.count = 0; // 初始计数为0
          console.log("索引", 0, this.count);
        } else {
          // 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
          if (tableBody[i].toolsKinds == tableBody[i - 1].toolsKinds) {
            // 如果相等
            this.cellList[this.count] += 1; // 增加计数
            this.cellList.push(0); // 相等就往cellList数组中追加0
            console.log("索引", i, this.count);
          } else {
            this.cellList.push(1); // 不等就往cellList数组中追加1
            this.count = i; // 将索引赋值为计数
            console.log("索引", i, this.count);
          }
        }
      }
    }
    // 第2步，将计算好的结果返回给el-table，这样的话表格就会根据这个结果做对应合并列渲染
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 给第二列做单元格合并。0是第一列，1是第二列。
      if (columnIndex === 1) {
        console.log("单元格数组，若下一项为0，则代表合并上一项", this.cellList);
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          console.log(`动态竖向合并单元格, 第${colCell}列，竖向合并${rowCell}个单元格 `);
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          // 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
          // 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    }
onMounted(()=>{
	Object.assign(formData,props.rowInfo);
})
 </script>