soc_web/src/views/resumption/plan/dialog.detail.vue

<template>
  <div class="rule-type">
    <DialogCom title="履职任务详情" :visible.sync="isShow" width="1500px">
      <el-descriptions :column="4" border>
        <el-descriptions-item label="任务名称">{{
          formData.planName
        }}</el-descriptions-item>
        <el-descriptions-item label="任务类型">{{
          getLabel(dict.type.resumption_plan_type, formData.planType)
        }}</el-descriptions-item>
        <el-descriptions-item label="任务周期">{{
          getLabel(dict.type.resumption_plan_cycle, formData.planCycle)
        }}</el-descriptions-item>
        <el-descriptions-item label="任务时段">{{
          getLabel(dict.type.resumption_plan_exec, formData.planExec)
        }}</el-descriptions-item>
        <el-descriptions-item label="机构类型">{{
          getLabel(orgTypeOptions, formData.execOrgType)
        }}</el-descriptions-item>
        <el-descriptions-item label="履职人员">
          {{
            resumptionRoles
              .filter((r) => formData.roleList.includes(r.id))
              .map((r) => r.name)
              .join("、")
          }}
        </el-descriptions-item>
        <el-descriptions-item label="任务次数" :span="formData.planCycle == 0?1:2">{{
          formData.count
        }}</el-descriptions-item>
        <el-descriptions-item label="开始时间" v-if="formData.planCycle == 0">{{
          dayjs(formData.startDate).format("YYYY年MM月DD日")
        }}</el-descriptions-item>
        <el-descriptions-item label="开始时间" v-if="formData.planCycle == 0">{{
          dayjs(formData.endDate).format("YYYY年MM月DD日")
        }}</el-descriptions-item>


        <el-descriptions-item label="履职机构" :span="4">
          <el-tooltip class="item" effect="dark" :content='formData.orgs ? formData.orgs.map((o) => o.name).join("、") : ""' placement="top">
            <div class="ellipsis-tooltip">
              {{ formData.orgs ? formData.orgs.map((o) => o.name).join("、") : "" }}
            </div>
          </el-tooltip>
          <div class="count">
            （{{formData.orgs.length }}）
          </div>
        </el-descriptions-item>



        <el-descriptions-item label="备注" :span="4">{{
          formData.note
        }}</el-descriptions-item>
      </el-descriptions>
      <el-table :data="tableData" style="width: 100%" height="400px">
        <el-table-column prop="ruleName" label="履职手册"> </el-table-column>
        <el-table-column prop="itemName" label="履职项"> </el-table-column>
        <el-table-column prop="pointName" label="履职内容" width="300px">
          <template slot-scope="scope">
            <pre>{{ scope.row.pointName }}</pre>
          </template>
        </el-table-column>
        <el-table-column v-if="false" prop="ofOrgId" label="所属机构id">
        </el-table-column>
        <el-table-column prop="areaName" label="履职区域"> </el-table-column>
        <el-table-column prop="checkName" label="履职点位" v-if="false">
        </el-table-column>
        <el-table-column label="是否扫描">
          <template v-slot="{ row }">
            {{ row.pointScan ? "是" : "否" }}
          </template>
        </el-table-column>

        <el-table-column label="必完成项">
          <template v-slot="{ row }">
            {{ row.required ? "是" : "否" }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="margin-top: 20px">
        <el-button @click="onHide">关闭</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>
import { findAllRole } from "@/api/system/role";
import * as api from "@/api/resumption/plan";
import { getLabel } from "@/views/commonOption.js";
import dayjs from "dayjs";
export default {
  dicts: [
    "resumption_plan_type",
    "resumption_plan_cycle",
    "resumption_org_type",
    "resumption_plan_status",
    "sys_org_type",
    "resumption_plan_exec",
  ],
  props: {
    orgTypeOptions: {
      type: Array,
    },
    ruleTypeOptions: {
      type: Array,
    },
  },
  data() {
    return {
      isShow: false,
      tableData: [],
      formData: {
        roleList: [],
      },
      resumptionRoles: [],
    };
  },
  methods: {
    getLabel,
    dayjs,
    show(id) {
      this.tableData = null;
      api.getDetail(id).then((r) => {
        this.formData = r.data;
        this.tableData = r.data.itemList;
        this.isShow = true;
        if (this.formData.execOrgType) {
          this.getRolesByOrg();
        }
      });
    },
    getRolesByOrg() {
      if (this.formData.execOrgType != null) {
        let params = {
          orgType: this.formData.execOrgType,
        };

        findAllRole(params).then((res) => {
          this.resumptionRoles = res.data;
        });
      }
    },
    onHide() {
      this.isShow = false;
    },
  },
};
</script>


<style scoped>
.ellipsis-tooltip {
  display: inline-block;
  max-width: 900px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  float: left;

}

.count {
  white-space: nowrap;
  margin-left: 5px;
  float: left;
}
</style>