logpm_page/src/views/supervise/IndicatorList.vue

<template>
  <basic-container>
    <!-- 首页表格 -->
    <div class="avue-crud content_max">
      <!-- 搜索模块 -->
      <div v-h5uShow="search" class="el_header_top">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="searchFrom" class="header_search">
          <!-- 查询按钮 -->
          <el-form-item label="考核部门：">
            <el-tree-select
              v-model="searchFrom.assessDept"
              :data="AssessmentDepartment"
              check-strictly
              :render-after-expand="false"
              style="width: 240px"
              @node-click="searcheNodeClick"
              clearable
              @change="assessDeptChange"
            />
          </el-form-item>

          <el-form-item label="归属部门">
            <el-tree-select
              v-model="searchFrom.createDeptName"
              :data="AssessmentDepartment"
              check-strictly
              :render-after-expand="false"
              style="width: 240px"
              @node-click="BelongsearcheNodeClick"
              clearable
              @change="Belongingdepartment"
            />
          </el-form-item>

          <el-form-item label="指标类型：">
            <el-select
              v-model="searchFrom.classifyId"
              class="m-2"
              placeholder="请选择指标类型"
              style="width: 240px"
              @change="Indicatortype"
              clearable
            >
              <el-option
                v-for="item in classificationoptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="考评时间：">
            <el-date-picker
              v-model="searchFrom.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :size="size"
              @change="timeChange"
              clearable
            />
          </el-form-item>
          <el-form-item class="el-btn">
            <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
            <!-- <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button> -->
          </el-form-item>
        </el-form>
      </div>

      <!-- 控件模块 -->
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <div class="avue-crud__left">
            <el-button type="primary" @click="BatchDelete" icon="Delete"> 批量删除</el-button>
            <el-button type="primary" @click="exportList"
              ><el-icon><Download /></el-icon>导出</el-button
            >
          </div>
          <!-- 头部右侧按钮模块 -->
          <div class="avue-crud__right">
            <el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
            <el-button icon="Search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>

      <!-- 首页表格 -->
      <el-row>
        <!-- 列表模块 -->
        <tablecmt
          ref="tableNode"
          :columnList="IndicatorColumnList"
          :tableData="classificationdata"
          :loading="loadingclassification"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @selectCheck="selectsc"
          @selection="selectionChange"
          :isselectfun="ProhibitSelection"
        >
          <template #default="slotProps">
            <template v-if="slotProps.scope.column.label === '操作'">
              <!--  -->
              <div class="ElBtnClass">
                <el-button text @click="ClassificationIndicatorView(slotProps.scope)"
                  >查看</el-button
                >
                <el-button
                  v-if="slotProps.scope.row.isEdit != '0'"
                  text
                  @click="ClassificationDditing(slotProps.scope)"
                  >编辑</el-button
                >
                <el-button
                  v-if="slotProps.scope.row.isEdit == '1'"
                  text
                  type="primary"
                  @click="CategoryDeletion(slotProps.scope)"
                  >删除</el-button
                >
              </div>
            </template>
          </template>
        </tablecmt>
      </el-row>

      <!-- 分页模块 -->
      <div class="flex-c-sb">
        <div></div>
        <el-pagination
          align="right"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="current"
          :page-sizes="[30, 50, 80, 120]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog v-model="newlyAdded" title="查看详情" width="60%">
      <el-form
        v-loading="loadingAddPopup"
        :model="lassificationform"
        label-width="70px"
        class="el_listForm"
        disabled
      >
        <el-form-item label="指标名称">
          <el-input v-model="lassificationform.classifyName" placeholder="暂无" />
        </el-form-item>

        <el-form-item label="指标分类">
          <el-input v-model="lassificationform.parentClassifyName" placeholder="暂无" />
        </el-form-item>

        <el-form-item label="考核部门">
          <el-input v-model="lassificationform.assessDeptName" placeholder="暂无" />
        </el-form-item>

        <el-form-item label="考核分数">
          <el-input v-model="lassificationform.point" placeholder="暂无" />
        </el-form-item>

        <el-form-item label="整改结果">
          <el-input
            :rows="2"
            type="textarea"
            v-model="lassificationform.objectionRemark"
            placeholder="暂无"
          />
        </el-form-item>

        <el-form-item label="考核人">
          <el-input v-model="lassificationform.assessUserName" placeholder="暂无" />
        </el-form-item>

        <el-form-item label="考评时间">
          <el-input v-model="lassificationform.createTime" placeholder="暂无" />
        </el-form-item>
        <!-- <el-form-item label="是否异议">
          <el-input
            v-model="lassificationform.isObjection"
            placeholder="
            暂无
            "
          />
        </el-form-item> -->
        <el-form-item label="指标状态">
          <!-- /1 表示提交 2 表示审核 通过 3 表示审核失败 -->
          <el-input
            v-model="lassificationform.indicatorsStatus"
            placeholder="
            暂无
            "
          />
        </el-form-item>
        <el-form-item label="意见反馈">
          <el-input
            :rows="2"
            type="textarea"
            v-model="lassificationform.appealReason"
            placeholder="暂无"
          />
        </el-form-item>
        <div class="el_photo_max">
          <el-form-item label="照片" class="el_fotnr">
            <el-upload
              v-model:file-list="srcList"
              list-type="picture-card"
              :on-preview="Photoviewing"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </div>
        <div class="annex">
          <el-form-item label="附件">
            <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
              :on-preview="fuj"
              :on-change="handleChange"
            >
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="newlyAdded = false">取消</el-button>
          <el-button :disabled="loadingAddPopup" type="primary" @click="newlyAddedFn">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 图片弹窗 -->
    <div class="dialodimg" width="30%">
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </div>

    <!-- 编辑弹窗 -->

    <el-dialog v-model="IndicatorEditing" title="编辑" width="30%">
      <el-form v-loading="Indicatoreditingload" :model="lassificationformedit" label-width="70px">
        <el-form-item label="考核部门" v-if="Assessmentstatus">
          <el-tree-select
            v-model="lassificationformedit.assessDept"
            :data="AssessmentDepartment"
            check-strictly
            :render-after-expand="false"
            style="width: 240px"
            @node-click="handleNodeClick"
          />
        </el-form-item>
        <el-form-item label="考核部门" v-else>
          <el-input
            v-model="lassificationformedit.assessDept"
            disabled
            placeholder="暂无考核部门"
          />
        </el-form-item>
        <el-form-item label="指标分类">
          <el-select
            v-model="lassificationformedit.indexClassification"
            class="m-2"
            placeholder="请选择指标分类"
            style="width: 100%"
            @change="ClassificationChange"
            :disabled="EditEnable"
          >
            <el-option
              v-for="item in classificationoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="指标项目">
          <el-select
            v-model="lassificationformedit.Indicatoritems"
            class="m-2"
            placeholder="请选择指标项目"
            style="width: 100%"
            @change="IndicatoritemsChange"
            :disabled="EditEnable"
          >
            <el-option
              v-for="item in Indicatoritems"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="指标分数">
          <el-select
            v-model="lassificationformedit.IndicatorScore"
            class="m-2"
            placeholder="请选择指标分数"
            style="width: 100%"
            :disabled="EditEnable"
          >
            <el-option
              v-for="item in IndicatorScore"
              :key="item.id"
              :label="item.point"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="考核人">
          <el-input
            v-model="lassificationformedit.assessUserName"
            disabled
            placeholder="请输入考核人"
          />
        </el-form-item>

        <el-form-item label="分数备注">
          <el-input
            v-model="lassificationformedit.textarea"
            :rows="4"
            type="textarea"
            placeholder="请输入分数备注"
            :disabled="EditEnable"
          />
        </el-form-item>

        <el-form-item label="整改结果回复">
          <el-input
            v-model="lassificationformedit.objectionRemark"
            :rows="4"
            type="textarea"
            placeholder="请输入整改结果回复内容"
          />
        </el-form-item>

        <el-form-item label="意见反馈">
          <el-input
            v-model="lassificationformedit.appealReason"
            :rows="4"
            type="textarea"
            placeholder="请输入意见反馈"
          />
        </el-form-item>

        <div class="el_photo_max">
          <el-form-item label="照片" class="el_fotnr">
            <el-upload
              disabled
              v-model:file-list="srcList"
              list-type="picture-card"
              :on-preview="Photoviewing"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </div>
        <div class="annex">
          <el-form-item label="附件">
            <el-upload
              disabled
              v-model:file-list="fileList"
              class="upload-demo"
              :on-preview="fuj"
              :on-change="handleChange"
            >
            </el-upload>
          </el-form-item>
        </div>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="IndicatorEditing = false">关闭</el-button>
          <el-button :disabled="Indicatoreditingload" type="primary" @click="IndicatorEditingFn">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </basic-container>

  <!-- 列表配置显示 -->
  <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="IndicatorColumnList"
  ></edittablehead>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, computed, onMounted } from 'vue';
import { IndicatorColumnList } from '@/option/supervise/supervise.js';
import functions from '@/utils/functions.js';
import { setNodeHeight } from '@/utils/util';
import { downloadXls } from '@/utils/util';
import {
  $_Getclassify,
  $_newlyadded,
  $_newlyremove,
  $_classifyAddChild,
  $_findIndicatorsList,
  $_findIndicatorsDetail,
  $_updateIndicators,
  $_removeByIds,
  $_selectChildCalssifyList,
  $_selectParentCalssifyList,
  $_parentId,
  $_selectPointList,
  $_exportIndicatorsList,
} from '@/api/classify/classify';
const loadingclassification = ref(false); //指标分类加载效果
const classificationdata = ref([]); //指标分类数据
const current = ref(1); //当前页
const total = ref(0); //总页数
const dialogVisible = ref(false); //图片弹窗
const fileList = ref([]); //附件列表
const IndicatorEditing = ref(false); //编辑弹窗
const pageSize = ref(50);
const lassificationform = ref({}); //分类表单
const lassificationformedit = ref({}); //编辑分类表单
const title = ref(true); //标题
const EditEnable = ref(true); //是否可以编辑
const EditID = ref(true); //编辑需要的ID
const currentPage = ref(1);
const newlyAdded = ref(false); //新增弹窗
const loadingAddPopup = ref(false); //弹窗加载
const selectionList = ref([]); //选中数据
const classificationoptions = ref([]); //指标分类
const searchFrom = ref({}); //搜索表单
const Indicatoritems = ref([]); //指标项目
const drawerShow = ref(false); //抽屉显示隐藏
const search = ref(true); //头部搜索
const department = ref(); //考核部门存储
const Indicatorediting = ref({}); //编辑表单
const query = ref({}); //搜索
const dialogImageUrl = ref(''); //图片地址
const columnList = ref();
const indicatorsValue = ref(0); //分类初始值
const indicatorsValues = ref(1); //子类
const IndicatorScore = ref([]); //指标分数
const Assessmentstatus = ref(true); //编辑考核部门状态
const Indicatoreditingload = ref(false); //编辑加载
const AssessmentDepartment = ref([]); //考核部门
const tempRow = ref(); //编辑信息
const url = ref('');
const fuj = val => {
  console.log(val);

  ElMessageBox.confirm('是否下载该文件?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      window.open(val.url);
    })
    .catch(() => {});
};
const srcList = ref([]);
/** 表格实例 */
const tableNode = ref();
const onLoad = () => {
  let data = {
    current: current.value,
    size: pageSize.value,
    ...query.value, //搜索参数
  };
  loadingclassification.value = true; //开启加载效果
  $_findIndicatorsList(data)
    .then(res => {
      console.log(res);
      if (res.data.data.records) {
        //   指标状态1 表示提交 2 表示审核通过 3 表示审核失败

        res.data.data.records.forEach(item => {
          if (item.indicatorsStatus == 1) {
            item.indicatorsStatus = '已提交';
          } else if (item.indicatorsStatus == 2) {
            item.indicatorsStatus = '已确认';
          } else if (item.indicatorsStatus == 3) {
            item.indicatorsStatus = '未确认';
          }

          //    是否存在异议 0 表示没有1表示存在
          if (item.isObjection != null) {
            if (item.isObjection) {
              item.isObjection = '没有';
            } else {
              item.isObjection = '存在';
            }
          }
        });

        classificationdata.value = res.data.data.records; //数据
      }
      total.value = res.data.data.total; //总页数
    })
    .catch(res => {})
    .finally(() => {
      loadingclassification.value = false; //开启加载效果
    });
};
onLoad();
// 条数
const sizeChange = val => {
  pageSize.value = val;
  onLoad();
};
// 页码
const currentChange = val => {
  current.value = val;
  onLoad();
};

// 获取分类指标
// 在外部定义递归函数，用于加载和更新分类
const loadChildren = (targetList, parentId, indicatorValue) => {
  let dataSub = { parentId };
  return $_parentId(dataSub).then(Rs => {
    const children = Rs.data.data.map(item => ({
      value: item.value,
      label: item.title,
      id: item.id,
      key: item.key,
      hasChildren: item.hasChildren, // 假定hasChildren是一个布尔值
      children: [],
    }));

    function findAndReplace(target, value) {
      for (let i = 0; i < target.length; i++) {
        if (target[i].value === value) {
          target[i].children = children;
          break;
        }
        if (target[i].children && target[i].children.length > 0) {
          findAndReplace(target[i].children, value);
        }
      }
    }

    findAndReplace(targetList, indicatorValue); // 查找并替换targetList的正确位置

    const childRequests = children
      .filter(child => child.hasChildren)
      .map(child => loadChildren(targetList, child.id, child.value)); // 使用完整的targetList进行递归

    // 等待所有子分类都加载完毕
    return Promise.all(childRequests);
  });
};
// 当分类项被点击时调用
const classification = (val, index) => {
  console.log(index, '当前点击的谁');

  const currentCategory = AssessmentDepartment.value.find(category => category.value === index);
  if (currentCategory) {
    if (currentCategory.hasChildren && currentCategory.children.length === 0) {
      // 当前分类有子分类并且尚未加载子分类，触发加载子分类的操作
      console.log('当前点击的是有子分类但未加载的父分类');
      loadChildren(AssessmentDepartment.value, val, index);
    } else {
      // 当前分类已经加载子分类或者没有子分类，无需进一步操作
      console.log('当前点击的分类没有子分类或子分类已加载');
    }
  } else {
    console.log('分类不存在于当前的分类列表中');
  }
};
// 初始时获取顶级分类
const loadInitialCategories = (val = 0) => {
  let dataSub = { parentId: val };
  $_parentId(dataSub).then(res => {
    console.log(res, '初始化顶级分类-------');
    res.data.data.forEach(item => {
      setTimeout(() => {
        classification(item.id, item.value);
      }, 0);
      AssessmentDepartment.value.push({
        value: item.value,
        label: item.title,
        id: item.id,
        key: item.key,
        hasChildren: item.hasChildren,
        children: [], // 初始化子分类列表
      });
    });
  });
};

loadInitialCategories();
// 图片查看
const Photoviewing = val => {
  dialogVisible.value = true;
  console.log('图片查看', val);
  dialogImageUrl.value = val.url;
};

// 获取指标分类
const Obtainclassification = () => {
  $_selectParentCalssifyList().then(res => {
    classificationoptions.value = res.data.data;
  });
};

const handleNodeClick = (data, node, component) => {
  // 'data' 是点击的节点数据
  // 'node' 是 Node 对象
  // 'component' 是组件的引用
  // console.log('You clicked:', data);
  department.value = data; //存储当前点击的考核部门
  console.log(department.value, '当前点击的考核部门');
  if (data.hasChildren) {
    classification(data.id, data.value);
  }

  // 根据你的需求处理点击事件
};
const assessDeptChange = () => {
  if (!searchFrom.value.assessDept) {
    query.value.assessDept = null;
    onLoad();
  }
  console.log(searchFrom.value.assessDept, '当前点击的考核部门');
};
// 归属部门查询
const Belongingdepartment = () => {
  if (!searchFrom.value.createDeptName) {
    query.value.createDeptName = null;
    onLoad();
  }
};
// 考核部门搜索
const searcheNodeClick = (data, node, component) => {
  // 'data' 是点击的节点数据
  // 'node' 是 Node 对象
  // 'component' 是组件的引用
  // console.log('You clicked:', data);
  department.value = data; //存储当前点击的考核部门
  console.log(department.value, '当前点击的考核部门');
  if (data.hasChildren) {
    classification(data.id, data.value);
  }
  // query.value.assessDeptName = data.label
  query.value.assessDept = data.id;
  onLoad();
  // 根据你的需求处理点击事件
};

const Indicatortype = () => {
  const _item = classificationoptions.value.find(res => res.id == searchFrom.value.classifyId);
  if (_item) query.value.parentClassifyId = _item.id;
  else delete query.value.parentClassifyId;
  // searchFrom.classifyId
  onLoad();
};
Obtainclassification();
// 分类新增按钮
const AddCategory = () => {};

// 批量删除分类
const BatchDelete = () => {
  if (!selectionList.value.length) {
    ElMessage({
      message: '请勾选要批量删除的数据',
      type: 'warning',
    });
    return;
  }
  loadingclassification.value = true; //开启加载效果

  let data = {
    id: [],
  };
  data['id'] = selectionList.value.map(res => res.id);
  data['id'] = data['id'].join(',');
  console.log(data, '批量删除');

  $_removeByIds(data)
    .then(res => {
      console.log(res, '删除成功返回值');
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      onLoad();
    })
    .catch(res => {})
    .finally(() => {
      loadingclassification.value = false; //关闭加载效果
    });
};

// 导出
const exportList = () => {
  ElMessageBox.confirm('是否导出数据?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      console.log('导出数据');
      let data = {
        ...searchFrom.value,
      };
      $_exportIndicatorsList(data).then(res => {
        downloadXls(res.data, `导出数据.xlsx`);
      });
    })
    .catch(() => {});
};
// 分类删除
const CategoryDeletion = val => {
  ElMessageBox.confirm(`是否删除${val.row.classifyName}分类?`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      loadingclassification.value = true; //开启加载效果
      console.log(val, '分类删除');
      let data = {
        id: [],
      };
      data['id'].push(val.row.id);
      data['id'] = data['id'].join(',');
      $_removeByIds(data)
        .then(res => {
          if (res.data.code == 200) {
            console.log(res, '删除成功返回值');
            ElMessage({
              message: res.data.msg,
              type: 'success',
            });
            onLoad();
          }
        })
        .catch(res => {})
        .finally(() => {
          loadingclassification.value = false; //关闭加载效果
        });
      onLoad();
    })
    .catch(() => {});
};

/** 展开列表控件 */
const showdrawer = _flag => {
  drawerShow.value = _flag;
};
/**
 * 设置列表 -- 固定函数
 * 弹窗的勾选回调，用于更改头部数组
 * 固定搭配，只需要更换   columnList
 *  */
const setnewcolum = (newarr, headarr, type) => {
  if (type == 1) {
    columnList.value = newarr;
    functions.setStorage(window.location.pathname + 'checkList', headarr);
  }
};
// 新增/编辑分类
const newlyAddedFn = () => {
  loadingclassification.value = true; //开启加载效果
  let data = {
    ...lassificationform.value,
    pId: 0, ///是否父指标 默认0
  };
  if (title.value) {
    console.log(data, '新增分类');
  } else {
    data.id = EditID.value;
  }

  $_newlyadded(data)
    .then(res => {
      console.log(res, '新增成功返回值');
      if (res.data.code == 200) {
        onLoad();
        newlyAdded.value = false; //关闭弹窗
        ElMessage({
          message: res.data.msg,
          type: 'success',
        });
      }
    })
    .catch(res => {})
    .finally(() => {
      loadingAddPopup.value = false; //关闭弹窗加载效果
      loadingclassification.value = false; //关闭加载效果
    });
};
// 表格选择
const selectionChange = list => {
  selectionList.value = list;
  console.log(selectionList.value, '已经选中的数据');
};
function ProhibitSelection(val, index) {
  if (val.isEdit == '1') {
    return true;
  } else {
    return false;
  }
}
const searchHide = () => {
  search.value = !search.value;

  setNodeHeight(tableNode.value.$el, '', true);
};

const BelongsearcheNodeClick = data => {
  department.value = data; //存储当前点击的考核部门
  if (data.hasChildren) {
    classification(data.id, data.value);
  }
  query.value.createDeptName = data.label;
  onLoad();
  console.log(data);
};
// 指标分类选择
const ClassificationChange = val => {
  console.log(val);
  classificationindicators(val);
};
// 分类指标
const classificationindicators = val => {
  $_selectChildCalssifyList({ pid: val }).then(res => {
    console.log(res, '分类列表');
    if (res.data.data) {
      Indicatoritems.value = res.data.data;
    }
  });
};
const IndicatoritemsChange = val => {
  selectPointListChange(val);
};
// 指标分数获取
const selectPointListChange = val => {
  $_selectPointList({ id: val }).then(res => {
    console.log(res, '分数列表');
    if (res.data.data) {
      IndicatorScore.value = res.data.data;
      if (!Assessmentstatus.value) {
        lassificationformedit.value.IndicatorScore = IndicatorScore.value.find(
          res => res.point == tempRow.value.point
        ).id;
      }
    }
  });
};
//  查看信息
const ClassificationIndicatorView = val => {
  srcList.value = [];
  fileList.value = [];
  console.log(val, '查看信息');
  newlyAdded.value = true; //开启弹窗
  $_findIndicatorsDetail({ id: val.row.id })
    .then(res => {
      loadingAddPopup.value = true; //开启弹窗加载效果
      console.log(res, '查看信息返回值');
      lassificationform.value = res.data.data; //赋值给弹窗表单
      //   指标状态1 表示提交 2 表示审核 通过 3 表示审核失败
      if (res.data.data.indicatorsStatus == 1) {
        lassificationform.value.indicatorsStatus = '已提交';
      } else if (res.data.data.indicatorsStatus == 2) {
        lassificationform.value.indicatorsStatus = '已确认';
      } else if (res.data.data.indicatorsStatus == 3) {
        lassificationform.value.indicatorsStatus = '未确认';
      }

      //    是否存在异议 0 表示没有1表示存在
      if (res.data.data.isObjection == '0') {
        lassificationform.value.isObjection = '没有';
      } else if (res.data.data.isObjection == '1') {
        lassificationform.value.isObjection = '存在';
      }
      console.log(res.data.data.pictures, '图片列表');
      url.value = res.data.data.pictures[0].url; //赋值给弹窗图片
      res.data.data.pictures.forEach(res => {
        if (res.url) {
          srcList.value.push({ name: res.name, url: res.url });
        }
      });
      // 附件

      res.data.data.files.forEach(res => {
        if (res.url) {
          fileList.value.push({ name: res.name, url: res.url });
        }
      });
      // if (res.data.data.pictures.length) {
      //   // 图片
      //   url.value = res.data.data.pictures[0].url; //赋值给弹窗图片
      //   console.log(url.value, '图片地址');

      // }
    })
    .catch(res => {})
    .finally(() => {
      loadingAddPopup.value = false; //关闭弹窗加载效果
    });
};
// 分类编辑
// @ApiModelProperty(value = "考核部门")
// private Long assessDept;

// @ApiModelProperty(value = "考核部门名称")
// private String assessDeptName;

// @ApiModelProperty(value = "考核人")
// private Long assessUserId;

// @ApiModelProperty(value = "考核人名称")
// private String assessUserName;

// @ApiModelProperty(value = "考核指标")
// private Long classifyId;

// @ApiModelProperty(value = "分数")
// private int point;

// @ApiModelProperty(value = "考核备注")
// private String remark;

// @ApiModelProperty(value = "指标状态 1 表示提交 2 表示审核 通过 3 表示审核失败")
// private Integer indicatorsStatus;

// @ApiModelProperty(value = "是否存在异议 0 表示没有 1 表示存在")
// private Integer isObjection;

// @ApiModelProperty(value = "异议备注")
// private String objectionRemark;

// 编辑弹窗展开
const ClassificationDditing = async val => {
  console.log(val, '编辑弹窗展开');
  if (val.row.isEdit == 1) {
    EditEnable.value = false;
  } else if (val.row.isEdit == 2) {
    EditEnable.value = true;
  }
  srcList.value = [];
  fileList.value = [];
  $_findIndicatorsDetail({ id: val.row.id })
    .then(res => {
      lassificationformedit.value.appealReason = val.row.appealReason; //申诉原因
      console.log(res.data.data.pictures, '图片列表');
      url.value = res.data.data.pictures[0].url; //赋值给弹窗图片
      res.data.data.pictures.forEach(res => {
        if (res.url) {
          srcList.value.push({ name: res.name, url: res.url });
        }
      });
      res.data.data.files.forEach(res => {
        if (res.url) {
          fileList.value.push({ name: res.name, url: res.url });
        }
      });
      // 附件

      // res.data.data.files.forEach(res => {
      //   if (res.url) {
      //     fileList.value.push({ name: res.name, url: res.url });
      //   }
      // });
    })
    .catch(res => {})
    .finally(() => {});
  Indicatoreditingload.value = true;
  IndicatorEditing.value = true; //编辑弹窗展开
  tempRow.value = val.row; //保存当前行数据到临时变量中，以便在编辑弹窗中使用。
  Assessmentstatus.value = false; //禁止修改考核部门
  console.log(val, '编辑');
  IndicatorScore.value = []; //指标分数重置
  Indicatoritems.value = []; //指标项目重置

  lassificationformedit.value.IndicatorScore = ''; //重置指标分数
  // lassificationformedit.value.Indicatoritems=''

  await ClassificationChange(val.row.parentClassifyId); //获取指标项目，传入指标分类ID
  await IndicatoritemsChange(val.row.classifyId); //通过指标项目DI获取指标分数
  lassificationformedit.value.indexClassification = val.row.parentClassifyId; //指标项目ID

  lassificationformedit.value.Indicatoritems = val.row.classifyId; //指标项目ID
  lassificationformedit.value.assessDept = val.row.assessDeptName; //考核部门名称
  // 固定值
  lassificationformedit.value.objectionRemark = val.row.objectionRemark; //异议描述
  lassificationformedit.value.textarea = val.row.remark; //分数备注
  lassificationformedit.value.assessUserName = val.row.assessUserName; //考核人名称

  // 固定值
  // lassificationformedit.value.IndicatorScore =  IndicatorScore.value.find(res=>res.point == val.row.point).id, //指标分数
  EditID.value = val.row.id; //编辑需要的ID
  let data = val.row;

  classification();
  Indicatoreditingload.value = false;
};

// 编辑信息
const IndicatorEditingFn = () => {
  let data = {
    id: EditID.value, //编辑id
    // assessDept: department.value.id, //考核部门ID
    // assessDeptName: department.value.label , //考核部门名称
    // assessUserId: '', //考核人ID
    // assessUserName: lassificationformedit.value.assessUserName, //考核人名称
    point: IndicatorScore.value.find(res => res.id == lassificationformedit.value.IndicatorScore)
      .point, //指标分数
    remark: lassificationformedit.value.textarea, //分数备注
    objectionRemark: lassificationformedit.value.objectionRemark, //异议描述
    // 指标项目名称
    classifyId: lassificationformedit.value.Indicatoritems, // 指标项目ID
    classifyName: Indicatoritems.value.find(
      res => res.id == lassificationformedit.value.Indicatoritems
    ).name, //指标项目名称
    appealReason: lassificationformedit.value.appealReason, //申诉原因
  };
  console.log(data, '处理好的参数');
  Indicatoreditingload.value = true; //开启加载
  $_updateIndicators(data)
    .then(res => {
      console.log(res, '编辑成功');
      if (res.data.code == 200) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
        });
        IndicatorEditing.value = false; //编辑弹窗关闭
        onLoad();
      }
    })
    .catch(res => {})
    .finally(() => {
      Assessmentstatus.value = true; //可以修改考核部门
      Indicatoreditingload.value = false; //关闭加载
    });
};
const searchChangeS = () => {
  searchFrom.value = {}; //重置搜索参数
  query.value = {};
  onLoad();
};
// 查询搜索
const searchChange = () => {
  searchFrom.createTime;
  if (searchFrom.value.createTime) {
    (query.value.startDateStr = searchFrom.value.createTime[0]),
      (query.value.endDateStr = searchFrom.value.createTime[1]);
  }
  // ...searchFrom.value,
  onLoad();
};
const timeChange = val => {
  console.log('val :>> ', val);

  if (val) {
    query.value.startDateStr = val[0];
    query.value.endDateStr = val[1];
  } else {
    delete query.value.startDateStr;
    delete query.value.endDateStr;
  }
  onLoad();
};
</script>

<style scoped lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.ElBtnClass {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.el_listForm {
  display: flex;
  flex-wrap: wrap;
  :deep(.el-form-item) {
    justify-content: flex-end !important;
    width: 30%;
  }
  :deep(.el-form-item__content) {
    align-items: flex-start !important;
  }
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.el_header_top {
  .el-form {
    // display: flex;
    // justify-content: space-between;
    // width: 100%;
    .el-form-item {
      margin: 4px 0;
      margin-right: 10px;
    }
    .el-btn {
      width: auto;
      margin-right: 0;
      margin-left: auto;
    }
  }
  :deep(.el-date-editor) {
    height: 100% !important;
  }
}
:deep(.el-card) {
  height: 100% !important;
  .el-card__body {
    height: 100%;
    .content_max {
      display: flex;
      flex-direction: column;
      height: 100%;
      .el-fy {
        flex: 1;
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
      }
    }
  }
}
// .maboxhi {
//   height: 700px !important;
// }
.el_fotnr {
  :deep(.el-upload) {
    display: none;
  }
}
:deep(.el_photo_max) {
  width: 100%;
  .el-form-item {
    width: 100%;
  }
}
:deep(.annex) {
  width: 100%;
  .el-upload {
    display: none;
  }
}
:deep(.dialodimg) {
  width: 40%;
  height: 300px;

  .el-dialog {
    width: 40%;
    height: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .el-dialog__body {
      width: fit-content;
      height: -webkit-fill-available;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>