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"
              >新增协会</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)"
                >修改</el-link
              >
              <el-link
              size="small"
              :underline="false"
              type="danger"
              style="margin-right: 10px"
              @click="deleteRowHandler(scope.row)"
              >删除</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>