soc_web/src/views/safetycheck/ruleManager/dialog.select.point.vue

<template>
  <DialogCom
    title="选择检查内容"
    :visible.sync="isShow"
    class="g-dialog-select-safe-check"
    width="55%"
    top="10vh"
    append-to-body
    @close="closed"
    @opened="opened"
  >
    <div class="el-dialog-div">
      <g-search-table
        ref="st"
        url="/core/safetycheck/ruleItem/pointSelectionPage"
        method="post"
        :search-data="search"
        :manual="true"
        :pageable="true"
        :select="true"
        :select-default="selectList"
        :drag="false"
        @select="onSelect"
      >
        <!-- 搜索 -->
        <template slot="searchs">
          <el-form-item prop="key" label="关键字">
            <el-input
              v-model="search.key"
              maxlength="50"
              placeholder="请输入检查项或检查内容"
              @changed="onKeyChanged"
            ></el-input>
          </el-form-item>
          <el-form-item prop="selectRuleId" label="检查手册">
            <el-select v-model="selectRuleId" clearable @change="onRuleChanged">
              <el-option
                v-for="item in ruleList"
                :value="item.id"
                :key="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>

        <!-- 表格 -->
        <template slot="columns">
          <el-table-column
            align="center"
            prop="itemName"
            label="检查项"
            min-width="40%"
          ></el-table-column>
          <el-table-column
            align="center"
            label="检查内容"
            prop="pointName"
            min-width="40%"
          >
            <template slot-scope="scope">
              <pre>{{ scope.row.pointName }}</pre>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="areaName"
            label="检查区域"
            min-width="20%"
          ></el-table-column>
          <!--         <el-table-column  align="center"   prop="nfcName"
                           label="采集点"
                           width="120"></el-table-column>-->
        </template>
      </g-search-table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button @click="onHide">关闭</el-button>
    </div>
  </DialogCom>
</template>
<script>
import GSearchTable from "@/components/table/gx.search.table.vue";
import { ruleListForOrg } from "@/api/safetycheck/rule.js";
export default {
  components: { GSearchTable },
  data() {
    return {
      isShow: false,
      selectList: [],
      ruleList: [],
      selectRuleId: null,
      search: this.emptySearch(),
      prevOrgType: [],
    };
  },
  computed: {},
  watch: {},
  props: {
    orgType: {
      type: Array,
      isRequired: true,
    },
  },
  methods: {
    show(defaultSelect) {
      this.isShow = true;
      if (defaultSelect && defaultSelect.map) {
        this.selectList = defaultSelect.map((s) => ({ id: s }));
      }
    },
    onHide() {
      this.isShow = false;
    },
    opened() {
      if (
        this.prevOrgType.length == this.orgType.length &&
        !this.prevOrgType.find((t) => !this.orgType.includes[t])
      ) {
        this.search.itemName = null;
        if (this.search.ruleId && this.search.ruleId.length > 0) {
          this.getList();
        }
      } else {
        this.search = this.emptySearch();
        ruleListForOrg({ orgType: this.orgType }).then((r) => {
          this.ruleList = r.data;
          this.prevOrgType = this.orgType;
          this.getList();
        });
      }
    },
    closed() {
      this.$refs.st.dataList = [];
    },
    onSelect(item) {
      this.selectList = item;
    },
    onKeyChanged() {
      this.getList();
    },
    onRuleChanged() {
      this.getList();
    },
    onSubmit() {
      let s = this.selectList;
      this.$emit("select", this.selectList);
      this.onHide();
    },
    emptySearch() {
      return {
        ruleId: [],
        itemName: null,
      };
    },
    getList() {
      if (!this.ruleList || this.ruleList.length === 0) {
        return;
      }

      if (this.selectRuleId) {
        this.search.ruleId = [this.selectRuleId];
      } else {
        this.search.ruleId = this.ruleList.map((r) => r.id);
      }
      this.$refs.st.search();
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  overflow: auto;
  margin-bottom: 20px;
}
.dialog-footer {
  margin-top: 20px;
}
</style>