soc_web/src/views/check/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--机构数据-->
      <el-col :span="4" :xs="24">
        <org-tree
          v-model="queryParams.orgId"
          @defaultKey="getDefaultKey"
          @checkChange="checkChange"
          @click="clickTreeNode"
          hangsheTree
        ></org-tree>
      </el-col>

      <el-col :span="20" :xs="24">
        <!--    搜索条件    -->
        <el-form
          :model="queryParams"
          ref="search"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="100px"
        >
          <el-form-item prop="execOrgType" label="检查机构类型">
            <el-select
              prop="execOrgType"
              label="检查机构类型"
              v-model="queryParams.execOrgType"
              placeholder="请选择检查机构类型"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_org_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="checkOrgType" label="受检机构类型">
            <el-select
              prop="checkOrgType"
              label="受检机构类型"
              v-model="queryParams.checkOrgType"
              placeholder="请选择受检机构类型"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_org_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
            
          </el-form-item>

          <el-form-item prop="checkRole" label="检查角色">
            <el-select
              @visible-change="getRolesByOrg"
              prop="checkRole"
              label="检查角色"
              v-model="queryParams.checkRole"
              placeholder="请选择检查角色"
              clearable
            >
              <el-option
                v-for="dict in resumptionRoles"
                :key="dict.index"
                :label="dict.roleName"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="planCycle" label="检查周期">
            <el-select
              prop="planCycle"
              label="检查周期"
              v-model="queryParams.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-form-item prop="planName" label="计划名称">
            <el-input
              v-model="queryParams.planName"
              :maxlength="50"
              name="planName"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item prop="planStatus" label="计划状态">
            <!-- <el-select
              prop="planStatus"
              label="计划状态"
              v-model="queryParams.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="queryParams.planStatus" active-value="1" inactive-value="2"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <!--    按纽    -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd()"
              v-hasPermi="['core:checkplan:add']"
              >新增计划</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
            :columns="columns"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          :data="pageData"
          @selection-change="handleSelectionChange"
          row-key="id"
          :tree-props="{ children: 'children' }"
        >
          <el-table-column
            prop="index"
            label="序号"
            width="80px"
            v-if="columns[0].visible"            
          ></el-table-column>
          <el-table-column
            prop="planName"
            label="计划名称"
            v-if="columns[1].visible"
          ></el-table-column>
          <el-table-column
            prop="planOfOrgName"
            label="计划所属机构"
            v-if="columns[4].visible"
          >
        
        </el-table-column>
        
          <el-table-column
            prop="planCreateOrgName"
            label="计划创建机构"
            v-if="columns[3].visible"
          >
          
          </el-table-column>
          <el-table-column
            prop="checkType"
            label="检查类型"
            v-if="columns[2].visible"
          >
            <template slot-scope="r"
              >{{
                getLabel(dict.type.check_type, `${r.row.checkType}`)
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="execOrgType"
            label="检查机构类型"
            v-if="columns[2].visible"
          >
            <template slot-scope="r"
              >{{
                getLabel(dict.type.sys_org_type, `${r.row.execOrgType}`)
              }}
            </template>
          </el-table-column>

          <el-table-column
            prop="checkOrgType"
            label="受检机构类型"
            width="120px"
            v-if="columns[6].visible"
          >
            <template slot-scope="r"
              >{{ getLabel(dict.type.sys_org_type, `${r.row.checkOrgType}`) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="roleNames"
            label="检查角色"
            v-if="columns[6].visible"
          >
          <template slot-scope="scope">
              <template v-for="item in splitRoleNames(scope.row.roleNames)">
                {{ item }}
                <br />
              </template>
            </template></el-table-column>
          <el-table-column
            prop="planCycle"
            label="检查周期"
            width="80px"
            v-if="columns[6].visible"
          >
            <template slot-scope="r"
              >{{
                getLabel(dict.type.check_cycle, `${r.row.planCycle}`)
              }}
            </template>
          </el-table-column>

          <el-table-column
            prop="count"
            label="检查次数"
            v-if="columns[6].visible"
          ></el-table-column>

          <el-table-column
            prop="planStatus"
            label="状态"
            width="80px"
            v-if="columns[6].visible"
          >
            <template slot-scope="r"
              >{{
                getLabel(dict.type.check_status, `${r.row.planStatus}`)
              }}
            </template>
          </el-table-column>

          <el-table-column
            prop="modifiedName"
            label="修改人"
            v-if="columns[6].visible"
          ></el-table-column>

          <el-table-column
            prop="updateTime"
            label="修改时间"
            width="80px"
            v-if="columns[6].visible"
          >

          <template slot-scope="scope">
              <span>{{ formatTime(scope.row.updateTime,"YYYY-MM-DD") }}</span>
            </template>
           
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="r">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="onEdit(r.row.id)"
                v-hasPermi="['core:checkplan:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="onDel(r.row.id, r.row.planName)"
                v-hasPermi="['core:checkplan:remove']"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-if="checkCanPublish(r.row)"
                @click="showDialogDistribute(r.row)"
                v-hasPermi="['core:checkplan:distribute']"
                >下发</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <dialog-edit
      ref="editDialog"
      @success="getList()"
      :orgTypeOptions="dict.type.sys_org_type"
      :ruleTypeOptions="dict.type.rule_type"
    ></dialog-edit>
    <DialogDistribute ref="dialogDistribute" @select="sel"></DialogDistribute>
  </div>
</template>

<script>
import DialogDistribute from "@/views/resumption/plan/distribute.vue";
import OrgTree from "@/components/orgTree";
import { mapState, mapMutations } from "vuex";
import DialogEdit from "./dialog.edit";
import * as api from "@/api/safetycheck/plan";
import { statusOptions, getLabel } from "@/views/commonOption";
import { listRole } from "@/api/system/role";
export default {
  name: "resumptionplan",
  dicts: [
    "sys_org_type",
    "rule_type",
    "check_cycle","check_status","check_type"
  ],
  components: {
    DialogEdit,
    OrgTree,
    DialogDistribute,
  },
  data() {
    const { params, query } = this.$route;
    return {
      isShow: false,
      loading: false,
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      resumptionRoles: [],
      total: 0,
      queryParams: {
        id: null,
        planName: null,
        checkRole: null,
        planCycle: null,
        planCreateOrgId: null,
        checkType: null,
        planOfOrgId: null,
        execOrgType: null,
        checkOrgType:null,
        planStatus:null,
        pageSize:10,
        pageNum:1,
        checkSub:false,
        orgId:null,
        ...query,
      },
      pageData: [],
      // 列信息
      columns: [
        { key: 0, label: `序号`, visible: true },
        { key: 1, label: `计划名称`, visible: true },
        { key: 2, label: `计划类型`, visible: true },
        { key: 3, label: `计划创建机构`, visible: true },
        { key: 4, label: `计划所属机构`, visible: true },
        { key: 5, label: `履职机构类型`, visible: true },
        { key: 6, label: `履职角色`, visible: true },
        { key: 7, label: `履职周期`, visible: true },
        { key: 8, label: `履职次数`, visible: true },
        { key: 9, label: `履职时间`, visible: true },
        { key: 10, label: `修改人`, visible: true },
        { key: 11, label: `计划状态`, visible: true },
      ],
    };
  },
  props: {},
  watch: {},
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
        //已完成下发的计划不显示下发按钮
    checkCanPublish(row) {
      console.log(row.planOfOrgType,"row.planOfOrgType")
      console.log(row.planOfOrgType == "1"&& row.children.length == 0,"row.children.length")
      if (row.planOfOrgType == "1"&& row.children.length == 0) {
        console.log("1111")
        return true
      }
      return false;
    },
    splitRoleNames(val) {
      if(val!=null&&val!=undefined){
        return val.split(',');
      }else{
        return [];
      }
      // 使用逗号分割字符串，得到角色名称的数组
      
    },
    sel(selectList){
      this.loading = true;
      api.distribute(selectList).then((response) => {
        this.getList();
          this.loading = false;
        })
    },
    getRolesByOrg() {
      let params = {
        // orgId:this.queryParams.orgId
      };
      listRole(params).then((res) => {
        // console.info(res);
        this.resumptionRoles = res.rows;
      });
    },
    getList() {
      this.loading = true;
      console.info(this.dict.type);
      api
        .list(this.queryParams)
        .then((response) => {
          this.pageData = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getDefaultKey(key) {
      this.queryParams.orgId = key;
      this.getList();
    },
    handleAdd(id, other = {}) {
      id=null;
      this.$refs.editDialog.show(id, other);
    },
    onEdit(id, other = {}) {
      this.$refs.editDialog.show(id, other);
    },
    showDialogDistribute(row){
      this.$refs.dialogDistribute.show(row);
    },
    async onDel(id, name) {
      this.$modal
        .confirm('是否确认删除名称为"' + name + '"的数据项？')
        .then(function () {
          return api.delelte(id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
      // await api.delelte(id);
      // this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("search");
      // this.queryParams.orgId = undefined;
      // this.$refs.tree.setCurrentKey(null);
      this.getList();
    },
    //单选框状态改变
    checkChange(state) {
      this.queryParams.checkSub = state;
      this.getList();
    },
    // 节点单击事件
    clickTreeNode(data) {
      this.queryParams.orgId = data.id;
      this.getList();
    },
    getStatusLabel(value) {
      return getLabel(statusOptions, value);
    },
    getLabel(options, value) {
      return getLabel(options, value);
    },
    //apimark//
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.brand {
}
</style>