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="2">{{
          formData.count
        }}</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";
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,
    show(id) {
      this.tableData = null;
      api.get(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,
        };
        debugger
        findAllRole(params).then((res) => {
          this.resumptionRoles = res.data;
        });
      }
    },
    onHide() {
      this.isShow = false;
    },
  },
};
</script>

<style></style>