[add] 增加选人组件

src/components/SelectUser.vue

@@ -0,0 +1,331 @@
+<!-- 选择评价人员 -->
+<template>
+  <div class="list-container">
+    <van-search
+      v-model="filters.realname"
+      show-action
+      :clearable="true"
+      input-align="center"
+      label="姓名"
+      placeholder="请输入姓名"
+      @search="onSearch"
+    >
+      <template #action>
+        <div @click="onSearch">搜索</div>
+      </template>
+    </van-search>
+    <van-list
+      v-model="loading"
+      :finished="listFinished"
+      :finished-text="listData.length > 0 ? '没有更多了' : '暂无数据'"
+      @load="onLoadMore"
+      :immediate-check="false"
+    >
+      <van-checkbox-group v-if="type === 'checkbox'" v-model="checkedArr" ref="checkboxGroup">
+        <van-swipe-cell
+          v-for="(item, index) in listData"
+          :key="index"
+          :name="index"
+          stop-propagation
+          :before-close="handleBeforeClose"
+        >
+          <div class="item-box">
+            <van-checkbox :name="item.id" @click="checkboxClick(item)" shape="square" :disabled="readonly"></van-checkbox>
+            <div>
+              <div class="item-title">
+                <span class="title">{{ item.realname }}</span>
+                <span class="score">工号({{ item.username || '暂无数据' }})</span>
+              </div>
+              <div class="item-content">
+              <span>
+                <span class="label">角色: </span>
+                <span class="text">{{ item.roleTxt || '暂无数据' }}</span>
+              </span>
+                <span>
+                <span class="label">岗位: </span>
+                <span class="text">{{ item.post || '暂无数据' }}</span>
+              </span>
+              </div>
+            </div>
+          </div>
+        </van-swipe-cell>
+      </van-checkbox-group>
+      <van-radio-group v-else v-model="checkedArr" ref="checkboxGroup">
+        <van-swipe-cell
+          v-for="(item, index) in listData"
+          :key="index"
+          :name="index"
+          stop-propagation
+          :before-close="handleBeforeClose"
+        >
+          <div class="item-box">
+            <van-radio :name="item.id" @click="checkboxClick(item)" :disabled="readonly"></van-radio>
+            <div>
+              <div class="item-title">
+                <span class="title">{{ item.realname }}</span>
+                <span class="score">工号({{ item.username || '暂无数据' }})</span>
+              </div>
+              <div class="item-content">
+              <span>
+                <span class="label">角色: </span>
+                <span class="text">{{ item.roleTxt || '暂无数据' }}</span>
+              </span>
+                <span>
+                <span class="label">岗位: </span>
+                <span class="text">{{ item.post || '暂无数据' }}</span>
+              </span>
+              </div>
+            </div>
+          </div>
+        </van-swipe-cell>
+      </van-radio-group>
+    </van-list>
+
+    <!--    底部的按钮  -->
+    <div class="bottom-button-container">
+      <div class="bottom-btn bottom-justify-div">
+        <van-button size="small" color="#C6C7CA" native-type="button" plain :disabled="disabled" @click="resetFunc">重置
+        </van-button>
+        <van-button v-if="type === 'checkbox'" size="small" color="#E63636" native-type="button" :disabled="disabled" @click="checkAll">全选</van-button>
+        <van-button size="small" color="#E63636" native-type="button" :disabled="disabled" @click="confirmFunc()">确定
+        </van-button>
+        <van-button size="small" color="#C6C7CA" native-type="button" plain :disabled="disabled" @click="$emit('cancel')">取消
+        </van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListMixin from '../mixins/ListMixin'
+
+export default {
+  name: 'SelectUser',
+  mixins: [ListMixin],
+  props: {
+    selectedData: {
+      type: String,
+      required: false,
+      default: () => {
+        return ''
+      }
+    },
+    // 一些其他的查询参数
+    filterData: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'radio'
+    }
+  },
+  // watch: {
+  //   selectedData: {
+  //     immediate: true,
+  //     deep: true,
+  //     handler (val) {
+  //       console.log(val)
+  //       this.handleCheckedArr()
+  //     }
+  //   }
+  // },
+  data () {
+    return {
+      loading: false, // 加载数据的标识，
+      listFinished: false, // 完成加载的标识
+      refreshing: false, // 下拉刷新的标志
+      listData: [], // 列表页的数据
+      listCount: 0, // 所有数据的数量
+      /* 分页的配置 */
+      ipagination: {
+        pageNo: 1,
+        pageSize: 10
+      },
+      url: {
+        list: '/sys/user/page'
+      },
+      checkedArr: [],
+      selectedDataArr: []
+    }
+  },
+  computed: {
+    disabled () {
+      return this.listData.length === 0 || this.readonly
+    }
+  },
+  methods: {
+    checkboxClick (item) {
+      console.log(item)
+      if (this.type === 'checkbox') {
+        if (this.checkedArr.includes(item.id)) {
+          console.log('------------增加了数据------------')
+          // 说明是增加了数据,为了顺序和列表顺序保持一致，用循环设置
+          const arr = []
+          for (const i of this.listData) {
+            if (this.checkedArr.includes(i.id)) {
+              arr.push(i)
+            }
+          }
+          this.selectedDataArr = arr
+        } else {
+          console.log('------------删除了数据------------')
+          // 说明是删除了数据
+          this.selectedDataArr = this.selectedDataArr.filter(i => i.id !== item.id)
+        }
+      } else {
+        this.selectedDataArr = [item]
+      }
+      console.log(this.selectedDataArr)
+    },
+    handleCheckedArr () {
+      // 清空选中的数据
+      if (this.type === 'checkbox') {
+        if (this.selectedData) {
+          this.checkedArr = this.selectedData.split(',')
+        } else {
+          this.checkedArr = []
+        }
+      } else {
+        if (this.selectedData) {
+          this.checkedArr = this.selectedData
+        } else {
+          this.checkedArr = ''
+        }
+      }
+    },
+    // 初始化数据
+    initData () {
+      this.ipagination.pageNo = 1
+      this.listData = []
+      this.listFinished = false
+      this.refreshing = false
+      this.loading = true
+      this.handleCheckedArr()
+    },
+    // 重置按钮点击的方法
+    resetFunc () {
+      this.checkedArr = []
+    },
+    checkAll () {
+      this.$refs.checkboxGroup.toggleAll(true)
+      this.selectedDataArr = [...this.listData]
+    },
+    // 确定 按钮触发的方法
+    confirmFunc () {
+      console.log(this.checkedArr)
+      //   先判断是否选择数据，没有提示
+      if ((this.type === 'checkbox' && this.checkedArr.length === 0) || (this.type === 'radio' && (!this.checkedArr || this.checkedArr.length === 0))) {
+        this.$message('请至少选择一条数据')
+        return
+      }
+      if (this.type === 'checkbox') {
+        this.$emit('selected-change', this.checkedArr.join(','))
+      } else {
+        this.$emit('selected-change', this.checkedArr)
+      }
+      this.$emit('selected-change-name', this.selectedDataArr.map(item => item.realname + '(' + item.username + ')').join(','))
+    },
+    onSearch () {
+      this.getListData()
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/list.less';
+@import '~@assets/less/common.less';
+
+.list-container{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 0;
+}
+
+.van-list {
+  padding: @pad-base;
+  flex: 1;
+  overflow: auto;
+}
+
+// 中间内容
+.item-box {
+  background: #FFFFFF;
+  padding: @pad-base;
+  display: flex;
+  align-items: center;
+
+  .van-checkbox{
+    display: block;
+    margin: 0 20px 0 0;
+  }
+
+  .van-radio {
+    display: block;
+    margin: 0 20px 0 0;
+  }
+
+  /deep/ .van-checkbox__icon--checked {
+    .van-icon {
+      background: @primary-color;
+      border-color: @primary-color;
+    }
+  }
+
+  /deep/ .van-radio__icon--checked {
+    .van-icon {
+      background: @primary-color;
+      border-color: @primary-color;
+    }
+  }
+
+  & + .item-box {
+    margin-top: 0.24rem;
+  }
+
+  // 左滑后 样式的变化
+  &.item-box-has-swipe {
+    border-radius: 0.1rem 0 0 0.1rem;
+
+    .item-state {
+      border-radius: 0 0 0 0.1rem;
+    }
+  }
+}
+
+// 底部按钮
+.bottom-button-container {
+  height: 1.28rem;
+  line-height: 1.28rem;
+  padding: 0 0.2rem;
+  background: #FFFFFF;
+}
+.bottom-justify-div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 0.2rem;
+
+  .van-button {
+    height: 0.8rem;
+    flex: 1;
+  }
+  /deep/ .van-button--plain {
+    color: #898989 !important;
+  }
+}
+
+</style>