soc_web/src/views/resumption/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">
        <div class="main-right-box">
          <!--    搜索条件    -->
          <div class="main-search-box" v-show="showSearch && rule">
            <el-form
              :model="queryParams"
              ref="search"
              size="small"
              :inline="true"
              
              label-width="100px"
            >
              <el-form-item
                prop="itemName"
                label="履职项"
                class="search_itemname"
              >
                <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>
            <!--    按纽    -->
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="refresh"
                  v-hasPermi="['resumption:ruleManager']"
                  >搜索</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  @click="onAddItem()"
                  :disabled="rule ? false : true"
                  v-hasPermi="['resumption:ruleManager:add']"
                  v-if="rule && rule.orgId == orgId && rule.ruleStatus == 0"
                  >新增履职项</el-button
                >
                <!-- <el-button
                  type="primary"
                  @click="onSelect()"
                  >选择</el-button
                > -->
                <el-button
                  type="primary"
                  :icon="expandAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                  @click="dakai"
                  size="mini"
                  :disabled="rule ? false : true"
                  >{{ expandAll ? "收起所有行" : "展开所有行" }}</el-button
                >
              </el-col>
              <!-- <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit-outline"
                  size="mini"
                  :disabled="single"
                  @click="handleUpdate"
                  v-hasPermi="['system:user:edit']"
                  >修改</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete"
                  v-hasPermi="['system:user:remove']"
                  >删除</el-button
                >
              </el-col>-->

              <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
                :columns="columns"
              ></right-toolbar>
            </el-row>
          </div>
          <el-table
            :data="tableData"
            border
            :default-expand-all="expandAll"
            v-if="fresh"
            style="width: 100%"
            v-loading="loading"
            height="650"
          >
            <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="checkName" label="履职点位">
                  </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="['resumption:ruleManager:edit']"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  slot="reference"
                  icon="el-icon-delete"
                  @click="deldata(scope.row.id)"
                  v-hasPermi="['resumption: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"
          />
        </div>
      </el-col>
    </el-row>
    <dialog-edit
      ref="dialogEdit"
      :rule="rule"
      :pointDataSource="dict.type.point_data_source"
      @success="onSuccess"
    ></dialog-edit>
  </div>
</template>

<script>
import OrgTree from "@/components/orgTree";
import { mapGetters } from "vuex";
import { page, treeData, del } from "@/api/resumption/ruleManager.js";
import DialogEdit from "./dialog.editItem.vue";

export default {
  name: "resumptionRuleManager",
  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: [],
      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,
      // treeProp: {
      //   disabled: function(data, node) {
      //     console.info("data",data)
      //     return data.isRule == 1
      //   }
      // }
    };
  },

  components: { DialogEdit, 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;
    },
    // async gettreelist() {
    //   await treeData().then((v) => {
    //     this.treedata = v.data;
    //     this.topItemKeys = v.data.map((d) => d.id);
    //   });
    // },
    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();
    },

    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>
        );
      }
    },
    deldata(val) {
      this.$modal
        .confirm("将删除履职项及其下所有履职内容,确定删除？")
        .then(() => {
          return del(val);
        })
        .then(() => {
          this.$message.info("删除成功");
          this.getList();
        });
    },
    /** 重置按钮操作 */
    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>
.search_itemname {
  ::v-deep .el-form-item__label {
    width: 60px !important;
  }
}
::v-deep .el-table__expanded-cell[class*="cell"] {
  padding: 0;
  padding-left: 47px;
}
</style>