TcAssetvue3/src/views/myTask/info.vue

<!-- 任务管理aaa -->
<template>
  <!-- 任务核查 -->
  <div class="L-task-info">
    <div class="info-left info-left-two" id="L-size-main">
      <div class="content-info content-info-two" id="L-header">
        <div class="info-title">任务详情</div>
        <el-button type="primary" @click="sendBack" class="fanhuipiaofu" size='mini'>返回</el-button>

        <div class="teshu-top-info">
          <div class="top-info">
            <el-row class="top-row">
              <el-col :span="8">
                任务下发时间：<span>{{ titleInfoObj.taskTime }}</span>
              </el-col>
              <el-col :span="8">
                任务名称：<span>{{ titleInfoObj.taskName }}</span>
              </el-col>
              <el-col :span="8">
                任务状态：<span>{{ taskstatus(titleInfoObj.taskStatus) }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                任务期限：<span>{{ titleInfoObj.taskDeadline }}</span>
              </el-col>
              <el-col :span="16">
                核查资产类型：<span>{{ listTow.join(",") }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <main class="renwuxiangqing">
        <div class="info-cut-off-rule-my" id="L-tab">
          <div class="info-title">资产信息</div>
        </div>
        <div class="info-bottom-box">
          <el-form :inline="true" :model="formInline" size="small" class="demo-form-inline" v-if="index == 1">
            <el-row>
              <el-col :span="7">
                <el-form-item label="系统名称:">
                  <el-input v-model="formInline.xtmc" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col> 
              <el-col :span="7">
                <el-form-item label="审核状态:">
                  <el-select v-model="formInline.status" placeholder="请选择">
                    <el-option label="未核查" value="0" />
                    <el-option label="已核查" value="1" />
                    <el-option label="审核通过" value="3" />
                    <el-option label="审核不通过" value="4" />
                    <el-option label="已关停" value="5" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button size="mini" type="primary" @click="handleQuery()">查询</el-button>
                  <el-button size="mini" @click="resetQuery()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form :inline="true" :model="formInlineTwo" size="small" class="demo-form-inline" v-if="index == 2">
            <el-row>
              <el-col :span="7">
                <el-form-item label="单位名称：">
                  <el-input v-model="formInlineTwo.unitName" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button size="mini" type="primary" @click="handleQuery()">查询</el-button>
                  <el-button size="mini" @click="resetQuery()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <section v-if="index == 1">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane 
                v-for="item in chanckListTow" 
                :key="item.lable"
                :label="item.conent" 
                :name="item.lable" 
                :xtmcName="item.xtmcName"
              />
            </el-tabs>
            <el-table 
              v-loading="loading" 
              :data="tableData" 
              :height="tabHeader" 
              :max-height="tabHeader"
              :row-class-name="tableRowClassName"
            >
              <el-table-column type="index" width="50" label="序号" align="center" />
              <el-table-column :label="xtmcName" prop="xtmc" align="center" />
              <el-table-column label="核查单位" prop="zcdwmc" align="center" />
              <el-table-column label="单位核查时间" prop="updateTime" align="center" />
              <el-table-column label="审核状态" width="200px" prop="status" class-name="table-status" align="center">
                <template #default="scope">
                  <span v-if="scope.row.status == 0" style="color: #E6A23C;">
                    未核查
                  </span>
                  <span v-if="scope.row.status == 1" style="color: #67C23A;">
                    已核查
                  </span>
                  <span v-if="scope.row.status == 3" style="color: #67C23A;">
                    审核通过
                  </span>
                  <span v-if="scope.row.status == 4" style="color: #F56C6C;">
                    审核不通过
                  </span>
                  <span v-if="scope.row.status == 5" style="color: #F56C6C;">
                    已关停
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作" prop="userId" class-name="table-operation" align="center">
                <template #default="scope">
                  <div style="display: flex;align-items: center;justify-content: center;">
                    <div 
                      style="display: flex;align-items: center;cursor: pointer;" 
                      @click="goInfo(1, scope.row)"
                      v-if="(scope.row.status != 4 && scope.row.status != 0) || (route.query.pageType == 'look' || route.meta.pageType == 'look')"
                    >
                      <img src="@/assets/images/icon-ck@2x.png" alt="" style="width: 20px;margin-right: 5px;">
                      <span class="look-info" style="color: #1485EF;">查看</span>
                    </div>
                    <div
                      v-if="(route.query.pageType == 'info' || route.meta.pageType == 'info') && scope.row.status != 3 && scope.row.status != 5 && scope.row.status != 1"
                      style="display: flex;align-items: center;cursor: pointer;margin-left: 10px;"
                      @click="goInfo(2, scope.row)"
                    >
                      <img src="@/assets/images/icon-shenhe@2x.png" alt="" style="width: 15px;margin-right: 5px;">
                      <span class="del-info" style="color: #1485EF;">核查</span>
                    </div>
                    <div 
                      style="display: flex;align-items: center;cursor: pointer;margin-left: 5px;"
                      @click="goInfo(3, scope.row)" 
                      v-show='scope.row.btgyy'
                    >
                      <img src="@/assets/images/icon-ck@2x.png" alt="" style="width: 20px;margin-right: 5px;">
                      <span class="look-info" style="color: #1485EF;">查看原因</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </section>
          <my-pagination 
            id="L-pagination" 
            :total="total" 
            :page="pagination.current" 
            :limit="pagination.size"
            @pagination="getPagination" 
            :current-page.sync="pagination.current"
          />
        </div>
      </main>
    </div>
    <div class="info-right" v-if="route.query.pageType == 'look' || route.meta.pageType == 'look'">
      <div class="info-title">任务流程节点</div>
      <div class="timeline">
        <div class="timeline-items" v-for="(item, index) in timeLineData" :key="index">
          <div class="left-box">
            <img class="main-img" :src="returnidimg(item.assetName)" alt="">
            <img class="icon-jt" v-if="(index + 1) != timeLineData.length" src="@/assets/images/icon-jt@2x.png" alt="">
          </div>
          <div class="right-box">
            <span class="span-title">{{ item.assetName }}:</span>
            <span class="span-time">{{ item.xfTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <my-dialog title="查看原因" ref="liebiaoDialog" @close="importClose" class="taskDialogBox" width="40%">
      <el-descriptions>
        <el-descriptions-item label="不通过原因">
          {{ chakanyuanyin }}
        </el-descriptions-item>
      </el-descriptions>
    </my-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useUserStore from "@/store/modules/user";

import myPagination from "@/views/components/Pagination/index.vue";
import myDialog from "@/views/components/myDialog/index.vue";
import { getassetTaskid, geassetTaskcHc } from "@/api/renwuApi/index.js";
import { assetLcpage } from "@/api/renwuApi/index.js";

import {require} from "@/utils/require.js";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
console.log("userStore:", userStore.roles);
const index = ref(1);
const formInline = ref({});
const formInlineTwo = ref({
  unitName: "",
});
const total = ref(0);
const pagination = ref({
  current: 1,
  size: 10,
});
const tableData = ref([]);
const tableDataTwo = ref([]);
const loading = ref(false);
const tabHeader = ref(undefined);
const timeLineData = ref([]);
const titleInfoObj = ref({});
const chakanyuanyin = ref("");
const activeName = ref("0");
const xtmcName = ref("系统名称");
const liebiaoDialog = ref(null);

const chanckList = [
  {
    lable: "0",
    conent: "web资产",
    xtmcName: "系统名称",
  },
  {
    lable: "1",
    conent: "小程序资产",
    xtmcName: "小程序名称",
  },
  {
    lable: "2",
    conent: "公众号资产",
    xtmcName: "公众号名称",
  },
  {
    lable: "3",
    conent: "电子邮件资产",
    xtmcName: "电子邮箱后缀",
  },
  {
    lable: "4",
    conent: "移动应用程序资产",
    xtmcName: "移动应用程序名称",
  },
];

const chanckListTow = ref([]);
const listTow = ref([]);

const sendBack = () => {
  if (localStorage.getItem('ismypagination')) {
    let formInline = JSON.parse(localStorage.getItem('ismypagination'));
    formInline.isfanhui = true;
    localStorage.setItem("ismypagination", JSON.stringify(formInline));
  }
  
  // 添加数据重新加载
  titleInfo();
  getList();
  
  router.go(-1);
};


const handleClick = (tab) => {
  activeName.value = tab.props.name;
  xtmcName.value = tab.props.xtmcName;
  localStorage.setItem("activeName", activeName.value);
  handleQuery();
};

const returnidimg = (iswenzi) => {
  const listsna = [
    {
      name: "下发",
      imgdata: require('@/assets/images/rwxf.png'),
    }, {
      name: "提交",
      imgdata: require('@/assets/images/wctj.png'),
    }, {
      name: "不通过",
      imgdata: require('@/assets/images/shbh.png'),
    }, {
      name: "审核通过",
      imgdata: require('@/assets/images/shtg.png'),
    }, {
      name: "驳回",
      imgdata: require('@/assets/images/shbh.png'),
    }
  ];
  
  const item = listsna.find(item => iswenzi.includes(item.name));
  return item ? item.imgdata : require('@/assets/images/wctj.png');
};

const assetLcpageList = async () => {
  const obj = {
    taskId: route.query.id || route.meta.id
  };
  const res = await assetLcpage(obj);
  timeLineData.value = res.data;
};

const importClose = () => {};

const goInfo = (type, row) => {
  if (type === 1) {
    router.push({
      name: 'mytaskAuditInfo',
      query: {
        pageType: "look",
        taskId: row.taskId,
        assetId: row.id,
        type: activeName.value,
      }
    });
  }
  if (type === 2) {
    router.push({
      name: 'mytaskAuditInfo',
      query: {
        pageType: "change",
        taskId: row.taskId,
        assetId: row.id,
        type: activeName.value,
      }
    });
  }
  if (type === 3) {
    chakanyuanyin.value = row.btgyy;
    liebiaoDialog.value.open();
  }
};

const taskstatus = (id) => {
  if (id) {
    const obj = {
      0: "已关闭",
      1: "进行中",
      2: "正常完成",
      3: "超期完成",
      4: "正常完成",
      5: "审核驳回"
    };
    return obj[id];
  }
  return "-";
};

const titleInfoObjtype = (type = "0,1") => {
  const list = type.split(",");
  listTow.value = [];
  chanckListTow.value = [];
  
  chanckList.forEach(res => {
    list.forEach(element => {
      if (element === res.lable) {
        listTow.value.push(res.conent);
        chanckListTow.value.push(res);
      }
    });
  });
  
  activeName.value = chanckListTow.value[0].lable;
  if (localStorage.getItem("activeName")) {
    activeName.value = localStorage.getItem("activeName");
    localStorage.setItem("activeName", activeName.value);
  }
  
  const listname = chanckListTow.value.filter(item => item.lable === activeName.value);
  if (listname.length) {
    xtmcName.value = listname[0].xtmcName;
  }
  
  handleQuery();
};

const titleInfo = async () => {
  const res = await getassetTaskid(route.query.id || route.meta.id);
  if (res.code === 200) {
    titleInfoObj.value = res.data;
    titleInfoObjtype(titleInfoObj.value.type);
  }
};

const resetQuery = () => {
  activeName.value = chanckListTow.value[0].lable;
  pagination.value = {
    current: 1,
    size: 10,
    type: activeName.value,
  };
  
  if (index.value === 1) {
    formInline.value = {
      type: activeName.value,
    };
    localStorage.removeItem("ismypaginationTow");
    getList();
  } else if (index.value === 2) {
    formInlineTwo.value = {
      unitName: "",
    };
    getListTwo();
  }
};

const handleQuery = () => {
  pagination.value = {
    current: 1,
    size: 10,
    type: activeName.value,
  };
  
  if (index.value === 1) {
    pagination.value = { ...pagination.value, ...formInline.value };
    formInline.value.isfanhuiTow = false;
    localStorage.setItem("ismypaginationTow", JSON.stringify(formInline.value));
    getList();
  } else if (index.value === 2) {
    getListTwo();
  }
};

const getPagination = (pages) => {
  pagination.value.current = pages.page;
  pagination.value.size = pages.limit;
  if (index.value === 1) {
    getList();
  } else if (index.value === 2) {
    getListTwo();
  }
};

const activeTab = (id) => {
  index.value = id;
  if (id === 1) {
    formInline.value = {
      unit: "",
      type: "",
      status: "",
    };
    getList();
  } else {
    formInlineTwo.value = {
      unitName: "",
    };
    getList();
  }
};

const getList = async () => {
  loading.value = true;
  pagination.value.taskId = route.query.id || route.meta.id;
  pagination.value.type = activeName.value;
  
  if (userStore.roles.includes("unit")) {
    pagination.value.dwmc = store.state.user.useer.nickName;
  }
  
  const res = await geassetTaskcHc(pagination.value);
  tableData.value = res.data.records;
  loading.value = false;
  total.value = res.data.total;
};

const getListTwo = () => {};

const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 !== 0 ? 'evenNumber-row' : '';
};

const cancalDebounce = () => {
  const element = document.getElementById('L-size-main');
  const header = document.getElementById('L-header');
  const tab = document.getElementById('L-tab');
  const pagination = document.getElementById('L-pagination');
  
  if (element && header && pagination && tab) {
    const elementHeight = element.offsetHeight;
    const headerHeight = header.offsetHeight;
    const paginationtHeight = pagination.offsetHeight;
    const tabHeight = tab.offsetHeight;
    tabHeader.value = elementHeight - headerHeight - paginationtHeight - tabHeight - 160;
  }
};

onMounted(() => {
  cancalDebounce();
  window.addEventListener('resize', cancalDebounce);
  titleInfo();
  assetLcpageList();

  if (localStorage.getItem('ismypaginationTow')) {
    const storedData = JSON.parse(localStorage.getItem('ismypaginationTow'));
    if (storedData.isfanhuiTow) {
      formInline.value = storedData;
      titleInfo();
    } else {
      localStorage.removeItem("ismypaginationTow");
    }
  }
});

onUnmounted(() => {
  window.removeEventListener('resize', cancalDebounce);
});
</script>

<style lang="scss" scoped>
::v-deep .el-timeline {
  padding-left: 0;
  font-size: 12px;
}

::v-deep .el-form-item__label {
  padding-right: 3px;
}

.look-info {}

::v-deep .el-dialog {
  margin-top: 20vh !important;
}

.content-info {
  position: relative;
}

.fanhuipiaofu {
  position: absolute;
  right: 20px;
  top: 10px;
}
</style>