soc_web/src/views/safetycheck/ruleManager/index.vue

<!-- 动环设备管理 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <org-tree
          v-model="queryParams.orgId"
          @click="clicktreenode"
          :customRequest="treeData"
          searchPlaceHolder="输入关键字进行过滤"
          :expand-on-click-node="true"
          node-key="id"
          :default-expanded-keys="topItemKeys"
          accordion
          :defaultProps="defaultProps"
          :showLowerCheck="false"
          :renderContent="renderContent"
        >
        </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="itemName" label="检查项">
            <el-input
              v-model="queryParams.itemName"
              placeholder="请输入内容"
              maxlength="50"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="pointName" label="检查内容">
            <el-input
              v-model="queryParams.pointName"
              placeholder="请输入检查内容"
              maxlength="50"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="refresh"
              v-hasPermi="['safetycheck:ruleManager']"
              >搜索</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"
              @click="onAddItem()"
              :disabled="rule ? false : true"
              v-hasPermi="['safetycheck:ruleManager:add']"
              v-if="rule && rule.orgId == orgId && rule.ruleStatus == 0"
              >新 增</el-button
            >
            <!-- <el-button
              type="primary".
              @click="onSelect()"
              >选择</el-button
            > -->
            <el-button
              type="warning"
              @click="dakai"
              :disabled="rule ? false : true"
              >{{ expandAll ? "收起所有行" : "展开所有行" }}</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
            :columns="columns"
          ></right-toolbar>
        </el-row>
        <el-table
          :data="tableData"
          border
          :default-expand-all="expandAll"
          v-if="fresh"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="props.row.pointDtoList"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="name"
                  label="检查内容"
                  v-if="columns[3].visible"
                >
                </el-table-column>
                <el-table-column
                  prop="areaName"
                  label="检查区域"
                  v-if="columns[4].visible"
                >
                </el-table-column>
                <!-- <el-table-column prop="dataTypeName" label="数据类型">
                </el-table-column>
                <el-table-column prop="degreeRiskName" label="风险等级">
                </el-table-column> -->
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="80"
            v-if="columns[0].visible"
          >
          </el-table-column>
          <el-table-column prop="name" label="检查项" v-if="columns[1].visible">
          </el-table-column>
          <!-- <el-table-column prop="itemDesc" label="标准及要求">
          </el-table-column> -->
          <el-table-column
            prop="pointNums"
            label="检查内容数量"
            v-if="columns[2].visible"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="140"
            v-if="rule && rule.orgId == orgId && rule.ruleStatus == 0"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-edit-outline"
                @click="onEditItem(scope.row.id)"
                v-hasPermi="['safetycheck:ruleManager:edit']"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                slot="reference"
                icon="el-icon-delete"
                @click="deldata(scope.row.id)"
                v-hasPermi="['safetycheck:ruleManager:remove']"
                >删除</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="dialogEdit"
      :rule="rule"
      :pointDataSource="dict.type.point_data_source"
      @success="onSuccess"
    ></dialog-edit>
    <SelectPoint ref="DialogSelect" @success="onSuccess" orgType="4">
    </SelectPoint>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { page, treeData, del } from "@/api/safetycheck/ruleManager.js";
import DialogEdit from "./dialog.editItem.vue";
import SelectPoint from "./dialog.select.point.vue";
import OrgTree from "@/components/orgTree";
export default {
  name: "safetycheckRuleManager",
  props: [],
  dicts: ["point_data_source"],
  data() {
    return {
      queryParams: {
        ruleId: null,
        itemName: null,
        pointName: null,
        pageNum: 1,
        pageSize: 10,
      },
      filterText: null,
      showSearch: true,
      rule: null, //选中的内容库
      // orgOfRule:null,//选中内容库
      expandAll: false,
      fresh: true,
      // checked: false,
      // item: {
      //   label: "",
      //   value: "",
      // },
      treedata: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [],
      loading: false,
      total: 0,
      topItemKeys: [],
      // defaultProps: {
      //   children: "children",
      //   label: "label",
      // },
      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 },
      ],
      currentOrgId: null,
    };
  },

  components: { DialogEdit, SelectPoint, OrgTree },

  computed: {
    ...mapGetters(["orgId"]),
    // ...mapState(["org", "loginUser"]),
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  async created() {
    // this.OID = this.loginUser.org.id;
    // await this.gettreelist();
    // await this.getList()
    // await this.getassetlist();
  },

  mounted() {},

  methods: {
    treeData,
    dakai() {
      this.expandAll = !this.expandAll;
      this.fresh = false;
      this.$nextTick(() => {
        this.fresh = true;
      });
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    async refresh() {
      this.currentPage = 1;
      this.getList();
    },
    async getList() {
      if (!this.queryParams.ruleId) {
        this.$message.warning("请先选择一个检查内容库定义");
        return;
      }
      this.loading = true;
      const data = await page(this.queryParams);
      this.tableData = data.rows;
      this.total = Number.parseInt(data.total);
      this.expandAll = false;
      this.loading = false;
    },

    handleSizeChange(val) {
      this.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    clicktreenode(data, node) {
      this.tableData = [];
      this.rule = null;
      this.queryParams.ruleId = null;
      if (!data.isRule) {
        return;
      }

      this.expandAll = false;
      this.fresh = false;
      this.$nextTick(() => {
        this.fresh = true;
      });

      this.queryParams.ruleId = data.id;
      this.rule = data;
      this.rule.orgId = node.parent.data.id;
      if (this.rule.ruleStatus != 0) {
        this.$message.info("履职内容库已禁用，无法编辑履职项、履职内容");
      }
      this.refresh();
    },
    deldata(val) {
      this.$modal
        .confirm("确定删除检查内容库定义？")
        .then(() => {
          return del(val);
        })
        .then(() => {
          this.$message.info("删除成功");
          this.getList();
        });
    },
    renderContent(h, { node, data, store }) {
      if (data.isRule == 0) {
        return (
          <span class="custom-tree-node">
            <span class="show-ellipsis">{data.shortName}</span>
          </span>
        );
      } else {
        return (
          <span class="custom-tree-node">
            <span style="display: flex">
              <i
                class="el-icon-s-management"
                style="color: #008cd6; padding-top: 3px"
              ></i>
              <span class="show-ellipsis">{data.shortName}</span>
            </span>
          </span>
        );
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("search");
      // this.queryParams.ruleId = undefined;
      // this.$refs.tree.setCurrentKey(null);
      this.getList();
    },
    onAddItem() {
      if (!this.rule) {
        this.$message.warning("请先选择检查内容库");
        return;
      }
      this.$refs.dialogEdit.show(null);
    },
    onEditItem(itemId) {
      this.$refs.dialogEdit.show(itemId);
    },
    onSelect() {
      this.$refs.DialogSelect.show();
    },
    onSuccess() {
      this.refresh();
    },
  },
};
</script>
<style lang="scss" scoped>
.show-ellipsis {
  display: block;
  width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search {
  display: flex;
  flex-wrap: wrap;
  & > div {
    width: 25%;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    & > span:first-child {
      display: inline-block;
      min-width: 70px;
      font-size: 14px;
      color: #606266;
    }
    &:nth-child(2),
    &:nth-child(3) {
      margin-left: 15px;
    }
    &:nth-child(3) > span {
      display: inline-block;
      min-width: 100px;
      font-size: 14px;
      color: #606266;
    }
    &:nth-child(1) > span {
      display: inline-block;
      min-width: 100px;
      font-size: 14px;
      color: #606266;
    }
    &:nth-child(1) {
    }
  }
}
.box {
  border: 1px solid #eee;
  margin-bottom: 20px;
  border-radius: 5px;
  padding: 10px;
  min-height: 120px;
  & > p {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }
}
.item {
  margin-bottom: 14px;
}
::v-deep .el-table__expanded-cell[class*="cell"] {
  padding: 0;
  padding-left: 47px;
}
::v-deep .formbox {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
  }
}
</style>