ShutongInterconnectedChemicalCloudPlatform/src/components/workflow/dialog/matrixIng.vue

<!--
@ 作者: 秦东
@ 时间: 2025-04-23 16:03:59
@ 备注: 矩阵数据处理
-->
<script lang="ts" setup>
import {
  searchMatrix,
  matrixCont,
  martixFieldStruct,
  matrixInfo,
} from "@/api/matrixapi/type";
import { getMatrixList, getMatrixField } from "@/api/matrixapi/index";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        matrixid: 0,
        matrixName: "",
        factorid: 0,
        factorName: "",
        outcomeid: 0,
        outcomeName: "",
        list: [],
      };
    },
  },
});

const emits = defineEmits(["update:data"]); //父级元素
const infor = computed({
  get: () => props.data,
  set: (val) => {
    emits("update:data", val);
  },
});
//搜索矩阵参数
const searchArchiveQuery = reactive<searchMatrix>({
  page: 1,
  pagesize: 10,
});
const total = ref(0); //总记录数
const farstId = ref<number>(0);
const loading = ref(true);
const loadingVal = ref(true);
const matrixContList = ref<matrixCont[]>();
const factorList = ref<martixFieldStruct[]>();
const outcomeList = ref<martixFieldStruct[]>();
/**
 * 获取矩阵列表
 */
const searchMatrixList = () => {
  loading.value = true;
  getMatrixList(searchArchiveQuery)
    .then(({ data }) => {
      console.log("获取矩阵列表->", data);
      matrixContList.value = data.list;
      total.value = data.total;
      if (data.list.length > 0) {
        farstId.value = data.list[0].id * 1;
      }
    })
    .finally(() => {
      loading.value = false;
      if (infor.value.matrix.matrixid != 0) {
        gainMatrixNeed(infor.value.matrix.matrixid);
      } else {
        infor.value.matrix.matrixid = farstId.value;
        gainMatrixNeed(farstId.value);
      }
    });
};

//获取矩阵相关字段
const gainMatrixNeed = (val: any) => {
  loadingVal.value = true;
  getMatrixField({ id: val * 1 })
    .then(({ data }) => {
      console.log("监听数据---->", data);
      factorList.value = data.factor;
      outcomeList.value = data.outcome;
      if (data.factor.length > 0) {
        if (infor.value.matrix.factorid == 0) {
          infor.value.matrix.factorid = data.factor[0].id * 1;
          infor.value.matrix.factorName = data.factor[0].name;
        }
      }
      if (data.outcome.length > 0) {
        if (infor.value.matrix.outcomeid == 0) {
          infor.value.matrix.outcomeid = data.outcome[0].id * 1;
          infor.value.matrix.outcomeName = data.outcome[0].name;
        }
      }
    })
    .finally(() => {
      loadingVal.value = false;
    });
};

//选择矩阵
const pickmatirval = (val: matrixCont) => {
  infor.value.matrix.matrixid = val.id * 1;
  infor.value.matrix.matrixName = val.name;
  infor.value.matrix.list = [];
  //   emits("change", matrixIsClick);
  gainMatrixNeed(val.id * 1);
};
onMounted(() => {
  console.log("初始数据加载---->", infor);
  searchMatrixList();
});
/**
@ 作者: 秦东
@ 时间: 2025-04-23 13:22:57
@ 功能: 判断当前选择的内容
*/
const judgeIsTrue = (val: number) => {
  let isTrue = false;
  if (infor.value.matrix.list && infor.value.matrix.list.length > 0) {
    infor.value.matrix.list.forEach((item: any) => {
      if (item.outcomeid == val) {
        isTrue = true;
      }
    });
  }
  return isTrue;
};

//选择矩阵值
const pickval = (val: martixFieldStruct) => {
  infor.value.matrix.outcomeid = val.id * 1;
  infor.value.matrix.outcomeName = val.name;
  let isAdd = true;
  infor.value.matrix.list.forEach((item: any, index: number) => {
    if (item.outcomeid == val.id * 1) {
      isAdd = false;
      infor.value.matrix.list.splice(index, 1);
    }
  });
  if (isAdd) {
    infor.value.matrix.list.push({
      outcomeid: val.id * 1,
      outcomeName: val.name,
    });
  }
  //   emits("change", infor.value.matrix);
};
</script>
<template>
  <div>
    <el-divider content-position="left">矩阵选项</el-divider>
    <el-descriptions
      title=""
      direction="vertical"
      :column="2"
      :size="size"
      border
      class="suojin"
    >
      <el-descriptions-item label="可用矩阵" width="50%">
        <el-row v-loading="loading">
          <el-col :span="24" class="materBody">
            <ul>
              <li
                v-for="item in matrixContList"
                :key="item.id"
                :class="infor.matrix.matrixid == item.id ? 'active' : ''"
                @click="pickmatirval(item)"
              >
                <el-text class="mx-1">{{ item.name }}</el-text>
                <el-text class="mx-1">{{ item.orgname }}</el-text>
              </li>
            </ul>
          </el-col>
          <el-col :span="24">
            <el-pagination
              v-model:total="total"
              v-model:current-page="searchArchiveQuery.page"
              small
              layout="prev, pager, next"
              :page-size="searchArchiveQuery.pagesize"
              :pager-count="5"
            />
          </el-col>
        </el-row>
      </el-descriptions-item>
      <el-descriptions-item label="矩阵选项" width="50%">
        <el-row v-loading="loadingVal">
          <el-col :span="24">
            <el-select
              v-model="infor.matrix.factorid"
              filterable
              placeholder="Select"
              style="width: 100%"
              @change="pickSelect"
            >
              <el-option :key="0" label="请选择" :value="0" />
              <el-option
                v-for="item in factorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="24" class="materBody">
            <ul>
              <li
                v-for="item in outcomeList"
                :key="item.id"
                :class="judgeIsTrue(item.id) ? 'active' : ''"
                @click="pickval(item)"
              >
                <el-text class="mx-1">{{ item.name }}</el-text>
                <el-text class="mx-1">{{}}{{item.pinyin}}</el-text>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<style lang="scss" scoped>
.materBody {
  padding: 5px 0 5px 0;

  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  li.active span {
    color: #409eff;
  }
}
.suojin {
  padding: 0px 20px;
}
</style>