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-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree
          class="filter-tree"
          :data="treedata"
          
          highlight-current
          
         
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span :title="data.label" class="show-ellipsis" v-if="data.isRule==0">{{
              data.label
            }}</span>
            <span v-else style="display: flex;">
              <i class="el-icon-s-management" style="color:#008CD6;padding-top:3px;"></i>
              <span :title="data.label" class="show-ellipsis" >{{
              data.label
            }}</span>
            </span>
          </span>
        </el-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="['resumption: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="['resumption:ruleManager:add']"
              v-if="rule && rule.orgId == orgId"
              >新 增</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>
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              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>
        <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"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="onEditItem(scope.row.id)"
                v-hasPermi="['resumption:ruleManager:edit']"
                >编辑</el-button
              >

              <el-popconfirm
                title="将删除履职项及其下所有履职内容,确定删除？"
                @confirm="deldata(scope.row.id)"
              >
                <el-button
                  type="text"
                  size="small"
                  slot="reference"
                  icon="el-icon-delete"
                  v-hasPermi="['resumption:ruleManager:remove']"
                  >删除</el-button
                >
              </el-popconfirm>
            </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>
  </div>
</template>

<script>
import OrgTree from "@/components/orgTree";
import { mapGetters, mapMutations } 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,
    };
  },

  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: {
    ...mapMutations([]),
    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.rule) {
        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) {
      if (!data.isRule) {
        return;
      }

      this.expandAll = false;
      this.fresh = false;
      this.$nextTick(() => {
        this.fresh = true;
      });
      this.tableData = [];
      this.queryParams.ruleId = data.id;
      this.rule = data;
      this.rule.orgId = node.parent.data.id;
      this.refresh();
    },

    renderContent(h, { node, data, store }) {
      if (data.isRule == 0) {
        return (
          <span class="custom-tree-node">
            <span class="show-ellipsis">
              {data.label}
            </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.label}</span>
            </span>
          </span>
        );
      }
    },
    async deldata(val) {
      await del(val);
      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>
.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>