agmp_wpr_vue/src/views/waterManage/index.vue

<template>
  <el-row class="el-row-container" v-loading="loading">
    <el-col :span="24" style="padding: 16px; height: 100%">
      <el-card style="height: 100%; overflow-y: auto">
        <el-col :span="24" class="elrow-main__col-top">
          <div style="display: flex">
            <select-tree
              v-model="form.goodsName"
              style="width: 250px"
              :treeData="treeData"
              :placeholder="'请输入产品名称/批次号'"
              @handlerClick="handlerClick"
              :checkVal="cusareaName"
            ></select-tree>
            <el-input
              v-model="assocName"
              style="width: 250px; margin: 0 16px"
              placeholder="请输入用户协会名称"
              clearable
            />
            <el-button type="primary" size="small" @click="handleSearch"
              >查询</el-button
            >
          </div>
          <div class="top-left">
            <el-button
              type="primary"
              size="small"
              @click="addAssociation"
              v-hasPermi="['wpr:society:add']"
              >新增协会</el-button
            >
          </div>
        </el-col>
        <el-col :span="24" class="elrow-main__col-bottom">
          <b-table
            ref="tableRef"
            :args="{ 'highlight-current-row': true }"
            :data="loadData"
            :columns="columns"
            isShowIndex
          >
            <template #operate="scope">
              <el-link
                size="small"
                :underline="false"
                type="primary"
                style="margin-right: 10px"
                @click="editRowHandler(scope.row)"
                v-hasPermi="['wpr:society:edit']"
                >修改</el-link
              >
              <el-link
                size="small"
                :underline="false"
                type="danger"
                style="margin-right: 10px"
                @click="deleteRowHandler(scope.row)"
                v-hasPermi="['wpr:society:delete']"
                >删除</el-link
              >
            </template>
          </b-table>
        </el-col>
      </el-card>
    </el-col>
    <association-manage
      :visible.sync="associationManageShow"
      :treeData="treeData"
      :userList="userList"
      @getList="handleSearch"
      :typeAssoc="typeAssoc"
      :editRow="editRow"
    />
  </el-row>
</template>

<script>
import { getAssocList, deleteAssoc } from '@/api/assoc/index.js';
import { listUser } from '@/api/system/user.js';
import BTable from '@/components/Table/index.vue';
import AssociationManage from './component/associationManage.vue';
import SelectTree from '@/components/SelectTree';
import { getTree } from '@/api/tree.js';
import { Message } from 'element-ui';
import { assign, omit } from 'lodash-es';

export default {
  name: 'waterManage',
  components: { BTable, AssociationManage, SelectTree },
  data() {
    return {
      form: {
        productName: ''
      },
      userList: [],
      treeData: [],
      loading: false,
      cusareaName: '',
      associationManageShow: false,
      assocName: '',
      areaId: '',
      typeAssoc: 'add',
      editRow: {},
      columns: [
        {
          label: '用水协会名称',
          prop: 'assocName',
          customRender: '',
          align: 'center'
        },
        {
          label: '管理区域',
          prop: 'cusareaNames',
          customRender: '',
          align: 'center'
        },
        {
          label: '负责人',
          prop: 'assocManageName',
          customRender: '',
          align: 'center'
        },
        {
          label: '电话',
          prop: 'userMobile',
          customRender: '',
          align: 'center'
        },
        {
          label: '操作',
          customRender: 'operate',
          align: 'center'
        }
      ]
    };
  },
  mounted() {
    this.searchHandler();
  },
  methods: {
    async searchHandler() {
      const res = await listUser({
        pageSize: 99999
      });
      this.userList = res.data;
    },
    addAssociation() {
      this.typeAssoc = 'add';
      this.editRow = {};
      this.associationManageShow = true;
    },
    // 删除
    deleteRowHandler(row) {
      const { assocId: assocIds } = row;
      this.$modal.confirm(`是否确认删除`).then(() => {
        deleteAssoc({
          assocIds
        }).then(() => {
          Message({ message: '删除成功', type: 'success' });
          this.handlerChange();
        });
      });
    },
    async loadData(parameter) {
      if (!this.areaId) {
        const treeList = this.$store.state.tree.treeList;
        let res = [];
        if (treeList.code === '000000') {
          res = treeList;
        } else {
          res = await getTree();
          this.$store.dispatch('tree/setTree', res);
        }
        this.treeData = res?.data;
        this.cusareaName ||= this.treeData[0].cusareaName;
        this.areaId = this.treeData[0].cusareaId;
      }
      const params = {
        assocName: this.assocName,
        areaId: this.areaId
      };
      const payload = omit(assign({}, parameter, params), []);
      return getAssocList(payload);
    },
    handlerClick(value) {
      this.areaId = value?.cusareaId;
    },
    handleSearch() {
      this.$refs.tableRef.refresh(true);
    },
    handlerChange() {
      this.$refs.tableRef.refresh(false);
    },
    // 修改
    editRowHandler(row) {
      this.typeAssoc = 'edit';
      this.editRow = row;
      this.associationManageShow = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row-container {
  height: 100%;
}
.elrow-main__col-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  .top-left {
    height: 100%;
    display: flex;
    align-items: center;
    i {
      background-color: #40d5ec;
      height: 45%;
      width: 5px;
      margin-right: 5px;
    }
  }
}
</style>