添加标段管理页面

src/components/CheckCardList/index.vue

@@ -0,0 +1,267 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-04-08 14:19:57
+ * @LastEditTime: 2022-04-11 11:53:15
+ * @LastEditors: your name
+ * @Description: 多选卡片列表
+ * have a nice day!
+-->
+
+<template>
+  <div class="check-card-list">
+    <template v-if="withHeader">
+      <div class="header">
+        <slot name="header">
+          <div class="title">{{ title }}</div>
+          <template v-if="withSearch">
+            <el-input
+              v-model="searchText"
+              :placeholder="searchPlaceholder"
+            />
+            <el-button
+              type="primary"
+              @click="searchClickHandler"
+            >搜索</el-button>
+          </template>
+        </slot>
+      </div>
+    </template>
+    <div class="main">
+      <template v-if="dataList.length">
+        <el-scrollbar class="scrollBar">
+          <el-row
+            v-infinite-scroll="load"
+            :infinite-scroll-distance="20"
+            infinite-scroll-disabled="disabled"
+            :gutter="16"
+            class="infinite-scroll"
+          >
+            <el-checkbox-group
+              v-model="checkedList"
+              @change="checkChange"
+            >
+              <el-col
+                v-for="(item, index) in dataList"
+                :key="index"
+                :span="span"
+              >
+                <div
+                  class="check-card"
+                  :style="{ height: cardHeight }"
+                  @click="cardClickHandler(item[checkId])"
+                >
+                  <div class="label">{{ item[label] }}</div>
+                  <el-checkbox :label="item[checkId]" />
+                </div>
+              </el-col>
+            </el-checkbox-group>
+          </el-row>
+          <template v-if="total > 1">
+            <p
+              v-if="loading"
+              class="center"
+            >加载中...</p>
+            <p
+              v-if="noMore"
+              class="center"
+            >没有更多数据了~</p>
+          </template>
+        </el-scrollbar>
+      </template>
+      <template v-else>
+        <el-empty description="暂无数据" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    withHeader: {
+      type: Boolean,
+      default: true
+    },
+    withSearch: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '多选卡片列表'
+    },
+    searchPlaceholder: {
+      type: String,
+      default: '请输入关键词'
+    },
+    column: {
+      type: Number,
+      default: 2
+    },
+    label: {
+      type: String,
+      default: 'name'
+    },
+    checkId: {
+      type: String,
+      default: 'id'
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    },
+    cardHeight: {
+      type: String,
+      default: '88px'
+    }
+  },
+  data() {
+    return {
+      keyWords: '',
+      searchText: '',
+      pageNum: 1,
+      pageSize: 20,
+      loading: false,
+      total: 0,
+      checkedList: []
+    }
+  },
+  computed: {
+    span() {
+      if (Number.isInteger(this.column)) {
+        if (this.column > 0 && this.column <= 24) {
+          return 24 % this.column ? 24 : 24 / this.column
+        } else {
+          throw new Error('Between 1 ~ 24!')
+        }
+      } else {
+        throw new Error('Only integer!')
+      }
+    },
+    noMore() {
+      return this.pageNum >= this.total
+    },
+    disabled() {
+      return this.loading || this.noMore
+    }
+  },
+  watch: {
+    searchText(val) {
+      if (val.length === 0) {
+        this.clearFliter()
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.$emit('load', this.keyWords, this.pageSize, this.pageNum)
+    },
+    searchClickHandler() {
+      if (this.searchText.length > 0) {
+        this.keyWords = this.searchText
+        this.pageNum = 1
+        this.fetchData()
+      }
+    },
+    clearFliter() {
+      this.keyWords === ''
+      this.pageNum = 1
+      this.fetchData()
+    },
+    load() {
+      this.pageNum += 1
+      // console.log(this.pageNum, this.total, this.loading)
+      this.fetchData()
+    },
+    cardClickHandler(id) {
+      console.log(id)
+    },
+    checkChange(arr) {
+      console.log(arr)
+      // this.$emit('check-change', arr)
+    },
+    // 父组件请求完成后调用此方法设置total值
+    setTotal(total) {
+      this.total = total
+    },
+    setLoading(loading) {
+      this.loading = loading
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.check-card-list::v-deep {
+  width: 100%;
+  height: 100%;
+  padding-top: 32px;
+  .header {
+    padding: 0 32px;
+    height: 32px;
+    display: flex;
+    .title {
+      flex: 1;
+      height: 24px;
+      font-size: 24px;
+      font-family: 'Microsoft YaHei';
+      font-weight: bold;
+      color: #303133;
+    }
+    .el-input {
+      max-width: 160px;
+      .el-input__inner {
+        height: 32px;
+      }
+    }
+    .el-button {
+      width: 56px;
+      margin-left: 8px;
+      padding: 0;
+      border-radius: 4px;
+    }
+  }
+  .main {
+    padding-top: 11px;
+    height: calc(100% - 32px);
+    .scrollBar {
+      height: 100%;
+      .el-scrollbar__wrap {
+        overflow-x: auto;
+      }
+      .infinite-scroll {
+        width: 100%;
+        height: 100%;
+        padding: 0 20px 0 32px;
+      }
+      .check-card {
+        margin-top: 16px;
+        padding: 16px;
+        background: #f5f7fa;
+        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        .label {
+          font-size: 16px;
+          font-family: 'Microsoft YaHei';
+          color: #303133;
+        }
+        .el-checkbox {
+          .el-checkbox__inner {
+            width: 16px;
+            height: 16px;
+          }
+          .el-checkbox__label {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/lotAuthorization/components/home.vue

@@ -1,3 +1,135 @@
 <template>
-  <div class="home">标段授权</div>
-</template>
+  <div class="lot-authorization-wrap">
+    <div class="lot-authorization-header">
+      <el-button
+        type="primary"
+        @click="btnSaveHandler"
+      >保存</el-button>
+    </div>
+    <el-row
+      class="lot-authorization-body"
+      :gutter="24"
+    >
+      <el-col :span="6">
+        <div class="body-card">
+          <CheckCardList
+            ref="officerList"
+            title="职员列表"
+            label="OfficerName"
+            check-id="OfficerId"
+            search-placeholder="请输入职员名称"
+            :data-list="officerList"
+            @load="loadOfficerList"
+            @check-change="officerCheckChangeHandler"
+          />
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="body-card">
+          <MultipleTree
+            ref="sectionTree"
+            :default-props="{
+              children: 'children',
+              label: 'SectionName'
+            }"
+            :data="sectionTree"
+            :checked-keys-duo="sectionCheckedKeys"
+            :org-list="sectionList"
+            :default-multiple="true"
+            node-key="SectionId"
+            up-node-key="SectionUpid"
+            title="选择标段"
+            @getTreeDataDuo="sectionCheckChangeHandler"
+          />
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="body-card">
+          <CheckCardList
+            ref="regulatorList"
+            title="监管单位"
+            label="name"
+            check-id="id"
+            search-placeholder="请输入单位名称"
+            :data-list="regulatorList"
+            @load="loadRegulatorList"
+            @check-change="regulatorCheckChangeHandler"
+          />
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="body-card">
+          <MultipleTree
+            ref="organizationTree"
+            :default-props="{
+              children: 'children',
+              label: 'OrganName'
+            }"
+            :data="orgTree"
+            :checked-keys-duo="orgCheckedKeys"
+            :org-list="orgList"
+            :default-multiple="true"
+            node-key="OrganId"
+            up-node-key="OrganUpid"
+            title="选择组织"
+            @getTreeDataDuo="orgCheckChangeHandler"
+          />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import CheckCardList from '@/components/CheckCardList'
+import MultipleTree from '@/components/organization'
+import officerList from '../mixins/officerList'
+import sectionTree from '../mixins/sectionTree'
+import regulatorList from '../mixins/regulatorList'
+import orgTree from '../mixins/orgTree'
+
+export default {
+  components: { CheckCardList, MultipleTree },
+  mixins: [officerList, sectionTree, regulatorList, orgTree],
+  data() {
+    return {
+      regulatorList: []
+    }
+  },
+  methods: {
+    btnSaveHandler() {
+      this.$message.warning('开发中')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.lot-authorization-wrap {
+  height: calc(100vh - 144px);
+  padding: 0 64px;
+  flex-direction: column;
+  .lot-authorization-header {
+    padding: 32px 0 24px;
+    overflow: hidden;
+    > .el-button {
+      width: 80px;
+      height: 40px;
+      float: right;
+    }
+  }
+  .lot-authorization-body {
+    height: calc(100% - 104px);
+    > .el-col {
+      height: 100%;
+      .body-card {
+        height: 100%;
+        padding-bottom: 0;
+        background: #ffffff;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+      }
+    }
+  }
+}
+</style>

src/views/lotAuthorization/mixins/officerList.js

@@ -0,0 +1,47 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-04-11 11:00:32
+ * @LastEditTime: 2022-04-11 11:37:01
+ * @LastEditors: your name
+ * @Description: 职员列表
+ * have a nice day!
+ */
+
+import { staffList as GetOfficerList } from '@/api/postInterface'
+
+export default {
+  data() {
+    return {
+      officerList: []
+    }
+  },
+  methods: {
+    officerCheckChangeHandler() {},
+    async loadOfficerList(keyWords = '', pageSize = 20, pageNum = 1) {
+      try {
+        this.$refs['officerList'].setLoading(true)
+        const res = await GetOfficerList({
+          QueryName: keyWords,
+          PageSize: pageSize,
+          PageIndex: pageNum
+        })
+        if (res.code === 0) {
+          const { records, pages } = res.returnData
+          if (pageNum === 1) {
+            this.officerList = records
+          } else {
+            this.officerList.push(...records)
+          }
+          this.$refs['officerList'].setTotal(pages)
+          this.$refs['officerList'].setLoading(false)
+        } else {
+          this.$message.error(res.message)
+          this.$refs['officerList'].setLoading(false)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+        this.$refs['officerList'].setLoading(false)
+      }
+    }
+  }
+}

src/views/lotAuthorization/mixins/orgTree.js

@@ -0,0 +1,65 @@
+/*
+ * @Author: your name
+ * @Date: 2021-12-22 17:00:22
+ * @LastEditTime: 2022-04-11 11:36:27
+ * @LastEditors: your name
+ * @Description: 组织树
+ */
+
+import { translateDataToTreeAll } from '@/utils/validate'
+import { tissueTreeList } from '@/api/postInterface'
+export default {
+  data() {
+    return {
+      orgTree: [
+        {
+          AuthCount: 0,
+          JobCount: 0,
+          OfficerCount: 0,
+          OrganId: -1,
+          OrganName: '佛山路桥',
+          OrganUpid: -2,
+          QueryTarget: '0',
+          Type: 0,
+          disabled: true,
+          children: []
+        }
+      ],
+      orgList: [],
+      orgCheckedKeys: []
+    }
+  },
+  mounted() {
+    this.getOrganTree()
+  },
+  methods: {
+    orgCheckChangeHandler(arr) {
+      console.log(arr)
+    },
+    async getOrganTree(name = '') {
+      try {
+        const result = await tissueTreeList({
+          QueryName: name
+        })
+        if (result.code === 0 && result.returnData.length) {
+          const obj = {
+            AuthCount: 0,
+            JobCount: 0,
+            OfficerCount: 0,
+            OrganId: -1,
+            OrganName: '佛山路桥',
+            OrganUpid: -2,
+            QueryTarget: '0',
+            Type: 0,
+            disabled: true,
+            children: translateDataToTreeAll(result.returnData, 'OrganUpid', 'OrganId')
+          }
+          this.orgList = result.returnData
+          this.orgTree = [obj]
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    }
+  }
+}

src/views/lotAuthorization/mixins/regulatorList.js

@@ -0,0 +1,20 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-04-11 11:08:35
+ * @LastEditTime: 2022-04-11 11:36:39
+ * @LastEditors: your name
+ * @Description: 监管单位列表
+ * have a nice day!
+ */
+
+export default {
+  data() {
+    return {
+      regulatorList: []
+    }
+  },
+  methods: {
+    regulatorCheckChangeHandler() {},
+    async loadRegulatorList(keyWords = '', pageSize = 20, pageNum = 1) {}
+  }
+}

src/views/lotAuthorization/mixins/sectionTree.js

@@ -0,0 +1,30 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-04-11 11:05:04
+ * @LastEditTime: 2022-04-11 11:57:08
+ * @LastEditors: your name
+ * @Description: 标段树
+ * have a nice day!
+ */
+
+export default {
+  data() {
+    return {
+      sectionTree: [
+        {
+          SectionId: -1,
+          SectionName: '标段1',
+          SectionUpid: -2,
+          disabled: true,
+          children: []
+        }
+      ],
+      sectionCheckedKeys: [],
+      sectionList: []
+    }
+  },
+  methods: {
+    sectionCheckChangeHandler() {},
+    async getSectionTree() {}
+  }
+}