soc_web/src/views/check/dialog.edit.vue

<template>
  <div class="rule-type">
    <el-dialog
      :title="id ? '编辑检查计划' : '新增检查计划'"
      :visible.sync="isShow"
      width="1500px"
    >
      <div class="page-body">
        <el-form
          :model="formData"
          :rules="formDataRules"
          size="small"
          ref="form"
          label-position="right"
          label-width="130px"
          label-prefix=":"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item prop="planName" label="计划名称:">
                <el-input
                  v-model="formData.planName"
                  :maxlength="50"
                  name="planName"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="checkType" label="检查类型:">
                <el-select
                  label="检查类型"
                  v-model="formData.checkType"
                  placeholder="请选择检查类型"
                  clearable
                >
                  <el-option
                    v-for="dict in dict.type.check_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="planCycle" label="检查周期:">
                <el-select
                  prop="planCycle"
                  label="检查周期"
                  v-model="formData.planCycle"
                  placeholder="请选择检查周期"
                  clearable
                >
                  <el-option
                    v-for="item in dict.type.check_cycle"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="execOrgType" label="检查机构类型:">
                <el-select
                  @change="cleanExecOrgList"
                  prop="execOrgType"
                  label="检查机构类型"
                  v-model="formData.execOrgType"
                  placeholder="请选择检查机构类型"
                  clearable
                >
                  <el-option
                    v-for="item in dict.type.sys_org_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item prop="roleIds" label="检查角色:">
                <el-select
                  @visible-change="getRolesByOrg"
                  label="检查角色"
                  v-model="formData.roleIds"
                  placeholder="请选择检查角色"
                  multiple
                  filterable
                  @change="handleRolesChange"
                >
                  <el-option
                    v-for="item in planRoles"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="checkOrgType" label="受检机构类型:">
                <el-select
                  @change="cleanCheckOrgList"
                  prop="checkOrgType"
                  label="受检机构类型"
                  v-model="formData.checkOrgType"
                  placeholder="请选择受检机构类型"
                  clearable
                >
                  <el-option
                    v-for="item in dict.type.sys_org_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="count" label="检查次数:">
                <el-input-number
                  style="margin-left: 10px"
                  v-model="formData.count"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="buildTaskNow" label="立即生效:">
                <el-checkbox
                :disabled="id ?true:false"
                  v-model="formData.buildTaskNow"
                  size="medium"
                  @change="handleCheckboxChange"
                  >勾选后当前周期开始生效</el-checkbox
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item prop="planStatus" label="计划状态">
                <!-- <el-select
                  label="计划状态"
                  v-model="formData.planStatus"
                  placeholder="请选择计划状态"
                  clearable
                >
                  <el-option
                    v-for="item in dict.type.check_status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
                <el-switch v-model="formData.planStatus" active-value="1" inactive-value="2"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :span="6" prop="execOrgIds" label="检查机构">
                <org-tree-select
                  v-model="formData.execOrgIds"
                  :queryData="parseInt(formData.execOrgType)"
                  ref="execorgTreeSelect"
                  :enabledCheckOrgTypes="parseInt(formData.execOrgType)"
                  :disable="true"
                >
                </org-tree-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :span="6" prop="checkOrgIds" label="受检机构">
                <org-tree-select
                  v-model="formData.checkOrgIds"
                  :queryData="parseInt(formData.checkOrgType)"
                  ref="checkorgTreeSelect"
                  :enabledCheckOrgTypes="parseInt(formData.checkOrgType)"
                  :disable="true"
                >
                </org-tree-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item :span="6" prop="description" label="备注">
            <el-input
              v-model="formData.description"
              :maxlength="255"
              clearable
            />
          </el-form-item>
        </el-form>
        <el-button @click="openSelect">新增检查内容</el-button>

        <el-table :data="tableData" style="width: 100%" height="400px">
          <el-table-column label="是否扫描">
            <template v-slot="{ row }">
              <el-switch
                v-model="row.pointScan"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="必完成项">
            <template v-slot="{ row }">
              <el-switch
                v-model="row.required"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="ruleName" label="检查手册"> </el-table-column>
          <el-table-column prop="itemName" label="检查项"> </el-table-column>
          <el-table-column prop="pointName" label="检查内容"> </el-table-column>
          <el-table-column prop="areaName" label="检查区域"> </el-table-column>
          <el-table-column prop="businessType" label="数据来源"> 
            <template slot-scope="r">
              {{
                getLabel(dict.type.point_data_source, `${r.row.businessType}`)
              }}
            </template>
          </el-table-column>
          <el-table-column prop="areaName" label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="removeRow(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-dialog>
    <DialogSelect
      ref="DialogSelect"
      :defaultSelect="defaultSelect"
      :orgType="formData.checkOrgType"
      @select="onSelect"
    ></DialogSelect>
  </div>
</template>

<script>
import OrgTreeSelect from "@/components/orgTreeSelect";
import { mapGetters } from "vuex";
import orgDropDown from "@/components/orgTree/orgDropDown.vue";
import OrgTree from "@/components/orgTree";
import korgTree from "@/components/k-orgTree";
import * as api from "@/api/safetycheck/plan";
import { statusOptions } from "@/views/commonOption";
import { findAllRole } from "@/api/system/role";
import {  getLabel } from "@/views/commonOption";
import DialogSelect from "@/views/safetycheck/ruleManager/dialog.select.point.vue";
export default {
  dicts: ["sys_org_type", "check_type", "check_cycle", "check_status","point_data_source"],
  data() {
    return {
      defaultSelect: [],
      selectedValues: [],
      planRoles: [],
      planName: null,
      planType: null,
      planCycle: null,
      planStatus: null,
      execOrgType: null,
      roleNames: null,
      planExec: null,
      count: 0,
      description: null,
      propItem: "",
      row: "",
      tableData: [],
      deptOptions: [],
      id: null,
      isShow: false,
      formData: this.reset(),
      formDataRules: {
        planName: [{ required: true, message: "请输入计划名称" }],
        checkType: [{ required: true, message: "请选择检查类型" }],
        planCycle: [{ required: true, message: "请选择检查周期" }],
        planStatus: [{ required: true, message: "请选择计划状态" }],
        execOrgType: [{ required: true, message: "请选择检查机构类型" }],
        roleList: [{ required: true, message: "请选择检查角色" }],
        planExec: [{ required: true, message: "请选择计划时间" }],
        count: [{ required: true, message: "请选择计划次数" }],
        checkOrgType: [{ required: true, message: "请选择受检机构类型" }],
        roleIds: [{ required: true, message: "请选择检查角色" }],
      },
      statusOptions: statusOptions,
    };
  },
  props: {
    orgTypeOptions: {
      type: Array,
    },
    ruleTypeOptions: {
      type: Array,
    },
  },
  watch: {},
  computed: {
    ...mapGetters(["orgId", "orgName"]),
  },
  methods: {
    getLabel(options, value) {
      return getLabel(options, value);
    },
    cleanExecOrgList() {
      this.execOrgIds = null;
      this.formData.execOrgList = [];
    },
    cleanCheckOrgList() {
      this.checkOrgIds = null;
      this.formData.checkOrgList = [];
    },
    tenantIdnormalizer(node, instanceId) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    handleCheckboxChange() {
    },
    reset() {
      return {
        planName: null,
        planType: null,
        planCycle: null,
        planStatus: null,
        execOrgType: null,
        roleNames: null,
        count: null,
        description: null,
        tableData: null,
        itemList: null,
        planExec: null,
        count: 0,
        note: null,
        planCreateOrgId: null,
        planCreateOrgName: null,
        roleList: null,
        roleIds: null,
        execOrg: null,
        checkOrg: null,
        buildTaskNow: false,
        checkOrgList: [],
        execOrgList: [],
        rulePointList: null,
        checkOrgIds: null,
        execOrgIds: null,
        rulePointIds: null,
        checkOrgType:null,
        checkType:null,
      };
    },
    getRolesByOrg() {
      let params = {
        orgType: null,
      };
      findAllRole(params).then((res) => {
        this.planRoles = res.data;
      });
    },
    handleChange(value) {
      this.count = value;
    },
    async refresh(id, other) {
      if(id!=null&&id!=undefined){
        await api.get(id).then(res=>{
          this.formData =res.data;
          this.formData.buildTaskNow
          this.tableData = res.data.rulePointList;
          if (this.formData.execOrgType) {
        this.formData.roleIds = this.formData.roleList.map((role) => role.id);
        this.formData.execOrgIds = this.formData.execOrgList.map(
          (org) => org.id
        );
        this.formData.checkOrgIds = this.formData.checkOrgList.map(
          (org) => org.id
        );
        this.getRolesByOrg();
      }
        })

      }else{
        this.formData.id=null;
        this.formData.planName= null;
        this.formData.planType= null;
        this.formData.planCycle= null;
        this.formData.planStatus= null;
        this.formData.execOrgType= null;
        this.formData.checkOrgType= null;
        this.formData.checkType= null;
        this.formData.roleNames= null;
        this.formData.count= null;
        this.formData.description= null;
        this.formData.tableData= null;
        this.formData.itemList= null;
        this.formData.planExec= null;
        this.formData.count= 0;
        this.formData.note= null;
        this.formData.planCreateOrgId= null;
        this.formData.planCreateOrgName= null;
        this.formData.roleList= null;
        this.formData.roleIds= null;
        this.formData.execOrg= null;
        this.formData.checkOrg= null;
        this.formData.buildTaskNow= false;
        this.formData.checkOrgList= [];
        this.formData.execOrgList= [];
        this.formData.rulePointList= null;
        this.formData.checkOrgIds= null;
        this.formData.execOrgIds= null;
        this.formData.rulePointIds= null;
      }
    },
    onSelect(selectList) {
      for (let i = 0; i < selectList.length; i++) {
        let tem = {
          pointScan: selectList[i].pointScan,
          required: !selectList[i].required,
          ruleName: selectList[i].ruleName,
          itemName: selectList[i].itemName,
          pointName: selectList[i].pointName,
          areaName: selectList[i].areaName,
          itemId: selectList[i].itemId,
          id: selectList[i].id,
          businessType:selectList[i].businessType,
        };
        if (this.tableData == null) {
          this.tableData = [];
        }
        this.tableData.push(tem);
      }
    },

    async show(id, other = {}) {
      this.id = id;
      this.tableData = null;
      this.formData.itemList = {};
      await this.refresh(id, other);
      this.getRolesByOrg();
      this.isShow = true;
    },
    removeRow(row) {
      this.tableData = this.tableData.filter((item) => item !== row);
    },
    // 事件
    onHide() {
      this.isShow = false;
    },
    getIteamF() {
      // if (this.id == null) {
      //   this.defaultSelect = [];
      //   return;
      // }else{
      //   api.getPointIds(this.id).then((res) => {
      //   this.defaultSelect = res.data;
      // });
      // }
      if (!this.tableData) {
        return [];
      } else {
        return this.tableData.map((d) => d.id);
      }
    },
    openSelect() {
      this.$refs.DialogSelect.show(this.getIteamF());
    },
    onSubmit() {
      this.$refs.form.validate(async (isValidate) => {
        this.formData.planCreateOrgId = this.orgId;
        this.formData.planCreateOrgName = this.orgName;
        if (!isValidate) return;
        this.formData.rulePointList = this.tableData == null ? [] : this.tableData;
        this.formData.roleList = null;
        this.formData.roleIds =
          this.selectedValues.length == 0 ? null : this.selectedValues;
          
        await api.add(this.formData);
        this.$emit("success");
        this.onHide();
      });
    },
    handleRolesChange(val) {
      this.selectedValues = val.toString().split(",");
    },
    // 事件
    //apimark//
  },
  mounted() {},
  components: { DialogSelect, orgDropDown, OrgTree, korgTree, OrgTreeSelect },
};
</script>

<style lang="scss" scoped>
.brand_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
</style>