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

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!-- <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="24" :xs="24">
        <div class="main-right-box">
          <!--    搜索条件    -->
          <div class="main-search-box" v-show="showSearch && rule">
            <div v-if="rule" style="padding-bottom: 10px; font-weight: 700">
              {{ rule.name }}
            </div>
            <el-form
              :model="queryParams"
              ref="search"
              size="small"
              :inline="true"
              label-width="100px"
            >
              <el-form-item prop="itemName" label="履职项" label-width="60px">
                <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">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="refresh"
                  v-hasPermi="['resumption:rule:contentmanage']"
                  >搜索</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:rule:contentmanage']"
                  v-if="rule && rule.orgId == orgId && rule.status == 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>
              <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
              ></right-toolbar>
            </el-row>
          </div>
          <el-table
            size="small"
            :data="tableData"
            border
            :default-expand-all="expandAll"
            v-if="fresh"
            style="width: 100%"
            :cell-style="tableCellStyle"
            :header-cell-style="tableHeaderCellStyle"
            v-loading="loading"
            height="600"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.pointDtoList"
                  style="width: 100%"
                  size="small"
                  :header-cell-style="pointTableHeaderCellStyle"
                >
                  <el-table-column type="index"></el-table-column>
                  <el-table-column
                    align="center"
                    prop="name"
                    label="履职内容"
                    v-if="columns[3].visible"
                  >
                    <template slot-scope="scope">
                      <div style="white-space: pre-wrap">
                        {{ scope.row.name }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="areaName"
                    label="履职区域"
                    v-if="columns[4].visible"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="checkName"
                    label="履职点位"
                    align="center"
                  >
                  </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
              align="center"
              type="index"
              label="序号"
              width="80"
              v-if="columns[0].visible"
            >
              <template slot-scope="scope">
                {{
                  arabicToChinese(
                    (queryParams.pageNum - 1) * queryParams.pageSize +
                      scope.$index +
                      1
                  )
                }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="履职项"
              v-if="columns[1].visible"
            >
            </el-table-column>
            <!-- <el-table-column prop="itemDesc" label="标准及要求">
          </el-table-column> -->
            <el-table-column
              align="center"
              prop="pointNums"
              label="履职内容数量"
              v-if="columns[2].visible"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="150"
              v-if="rule && rule.orgId == orgId && rule.status == 0"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-edit-outline"
                  @click="onEditItem(scope.row.id)"
                  v-hasPermi="['resumption:rule:contentmanage']"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  slot="reference"
                  icon="el-icon-delete"
                  @click="deldata(scope.row.id)"
                  v-hasPermi="['resumption:rule:contentmanage']"
                  >删除</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 { get as getRule } from "@/api/resumption/rule.js";
import { getLabel } from "./../../commonOption";
import DialogEdit from "./dialog.editItem.vue";
import { arabicToChinese } from "@/utils/util.js";
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, //选中的手册
      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() {
    let id = this.$route.params.id;
    if (!id) {
      this.$tab.closePageAndPushPrev();
      return;
    }

    getRule(id).then((r) => {
      this.rule = r.data;
      // this.$tab.setPageTitle(r.data.name);
    });
    this.queryParams.ruleId = id;
    this.getList();
  },

  methods: {
    treeData,
    getLabel,
    arabicToChinese,
    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.queryParams.pageNum = 1;
      this.expandAll = false;
      this.fresh = false;
      this.$nextTick(() => {
        this.fresh = true;
      });
      this.getList();
    },
    async getList() {
      if (!this.queryParams.ruleId) {
        this.$message.warning("请先选择一个履职手册");
        return;
      }
      this.tableData = [];
      this.loading = true;
      page(this.queryParams).then((data) => {
        this.tableData = data.rows;
        this.total = Number.parseInt(data.total);
        this.loading = false;
      });
    },
    clicktreenode(data, node) {
      this.tableData = [];
      this.rule = null;
      this.queryParams.ruleId = null;

      if (!data.isRule) {
        return;
      }

      this.queryParams.ruleId = data.id;
      this.rule = data;
      this.rule.orgId = node.parent.data.id;
      if (this.rule.status != 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: 12px"
              ></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(isAdd) {
      if (isAdd) {
        this.queryParams.pageNum = 1;
      }
      this.getList();
    },
    tableCellStyle() {
      return "border-color:#aaa;";
    },
    tableHeaderCellStyle() {
      return "border-color:#aaa;";
    },
    pointTableHeaderCellStyle(){
      return "background-color:#d7d7d7 !important";
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__expanded-cell[class*="cell"] {
  padding: 0;
  padding-left: 47px;
}

// .el-table-item,  .el-table-item td,el-table-item.th{

//     border:1px solid red

// }
</style>