维修基金优化

lin

2024-05-14 f5d653f7e330b33f90fd8d48bb88a128c3e80b6a

维修基金优化

 src/views/property/components/userList.vue

New file
@@ -0,0 +1,284 @@
<template>
  <el-dialog class="dept-user-table-dialog" width="70%" title="选择人员" modal-append-to-body="false" append-to-body="true"
    :close-on-click-model="true" :visible.sync="showDialog" @close="showDialog = false">
    <!-- <div class="left">
      <el-scrollbar>
        <basic-container>
          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
        </basic-container>
      </el-scrollbar>
    </div> -->
    <div class="right">
      <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud" v-model="form"
        :page.sync="page" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
        @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"></avue-crud>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>


</template>

<script>
  import {
    getDeptLazyTree
  } from "@/api/system/dept";
  import {
    getList
  } from "@/api/doorplateAddress/doorplateAddress";
  import {
    mapGetters
  } from "vuex";

  export default {
    name: "DeptUserTable",
    data() {
      return {
        showDialog: false,
        form: {},
        search: {},
        selectionList: [],
        query: {},
        loading: true,
        platformLoading: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        treeDeptId: '',
        treeData: [],
        treeOption: {
          nodeKey: 'id',
          lazy: true,
          treeLoad: function(node, resolve) {
            const parentId = (node.level === 0) ? 0 : node.data.id
            getDeptLazyTree(parentId).then(res => {
              resolve(res.data.data.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                }
              }))
            })
          },
          addBtn: false,
          menu: false,
          size: 'small',
          props: {
            labelText: '标题',
            label: 'title',
            value: 'value',
            children: 'children'
          }
        },
        option: {
          height: 'auto',
          calcHeight: 120,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          selection: true,
          viewBtn: true,
          dialogType: 'drawer',
          dialogClickModal: false,
          menu: false,
          addBtn: false,
          rowKey: "id",
          reserveSelection: true,
          column: [
            // {
            //   label: "用户姓名",
            //   prop: "name",
            //   search: true,
            //   searchSpan: 4,
            //   display: false
            // },
            // {
            //   label: "电话",
            //   prop: "phoneNumber",
            //   slot: true,
            //   searchSpan: 4,
            //   search: true,
            //   display: false
            // },
            {
              label: "地址",
              width: 560,
              prop: "addressName",
              slot: true,
              display: false
            },
            {
              label: "楼栋",
              prop: "buildingName",
              slot: true,
              searchSpan: 4,
              search: true,
              display: false
            },
            {
              label: "单元",
              prop: "unitName",
              searchSpan: 4,
              slot: true,
              search: true,
              // display: false
            },
            {
              label: "户室号",
              prop: "houseName",
              searchSpan: 4,
              slot: true,
              search: true,
              display: false
            },
            {
              label: "地址编码",
              prop: "addressCode",
              // searchSpan: 4,
              // slot: true,
              // search: true,
              display: false
            },

          ],
        },
        data: [],
        articleRange: '',
      }
    },
    computed: {
      ...mapGetters(["userInfo", "permission"]),
      ids() {
        let ids = []
        this.selectionList.forEach(ele => {
          console.log(ele, "---------")
          ids.push({
            id: ele.id,
            houseName: ele.houseName,
            addressCode: ele.addressCode
          })
        })
        return ids.join(",")
      },
      idsList() {
        let ids = []
        this.selectionList.forEach(ele => {
          ids.push({
            id: ele.id,
            houseName: ele.houseName || "",
            addressCode: ele.addressCode
          })
        })
        return ids
      }
    },
    methods: {
      submit() {
        this.$emit("selectPersonList", this.idsList)
        this.showDialog = false
      },

      show(articleRange) {
        console.log("***111111111111111111***", articleRange)
        this.articleRange = articleRange
        this.showDialog = true
        this.page.currentPage = 1
        this.onLoad(this.page)
      },

      nodeClick(data) {
        this.treeDeptId = data.id
        this.page.currentPage = 1
        this.onLoad(this.page)
      },
      searchReset() {
        this.query = {}
        this.treeDeptId = ''
        this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
      },
      selectionChange(list) {
        console.log(list, "list")
        this.selectionList = list
      },
      selectionClear() {
        this.selectionList = []
        this.$refs.crud.toggleSelection()
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage
        this.onLoad(this.page)
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true
        params.districtIds = this.articleRange
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId)
          .then(res => {
            const data = res.data.data
            this.page.total = data.total
            this.data = data.records
            // this.data.forEach(item => {
            //   if (!item.unitName) {
            //     item.unitName = '1单元'
            //   }
            // })
            this.loading = false
            // this.selectionClear()
          })
      },
    }
  }
</script>

<style lang="scss">
  .dept-user-table-dialog {
    margin: 0 !important;

    .el-dialog {
      display: flex;
      flex-direction: column;
      margin: auto !important;
      position: absolute;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      //width: 1000px !important;
      height: 800px !important;

      .el-dialog__body {
        height: 0 !important;
        flex: 1;
        display: flex;

        .left {
          width: 0;
          flex: 2;
        }

        .right {
          margin-left: 10px;
          flex: 9;
        }
      }
    }
  }
</style>