vant+v2 封装数据单选和多选组件

一:想要实现的效果

1.当工作班人员是单选的时,显示正常Picker 选择器的效果.

2.当是多选的时候,显示多选框效果,并可以回显选中的状态.

单选: 

多选:

 

2.实现思路:

1.在正常渲染的表单上,写一个<van-field>标签.强调工作班人员的位置,.

2用<template>引入分装的组件,只管显示值的选择,回显等操作.

3.需要this.$emit父组件,将值渲染到页面

    //人员获取值
    getFromUserData(keyName, option, numField) {
      this.ticketMainFormObj[keyName] = option.code;
      this.$set(this.ticketMainFormObj, keyName, option.code);
      this.$forceUpdate();
    },

3.代码

<template>
  <div>
    <van-field
      readonly
      :disabled="disabled"
      v-model="endValue"
      placeholder="请选择"
      ref="childSelect"
      @click="show"
    />
    <van-popup
      v-model="showPicker"
      position="bottom"
      get-container="#app"
      style="min-height: 5rem"
    >
      <van-search
        v-model="nextUserSearch"
        placeholder="请输入接收人名称"
        @search="onSearch"
      />
      <!-- 单选 -->
      <van-picker
        v-if="!multiple"
        value-key="name"
        show-toolbar
        :columns="options"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
      <!-- 多选 -->
      <div v-if="multiple">
        <div class="van-picker__toolbar">
          <button
            type="button"
            class="van-picker__cancel"
            @click="closePopup(1)"
          >
            取消
          </button>
          <button
            type="button"
            class="van-picker__confirm"
            @click="closePopup(2)"
          >
            确认
          </button>
        </div>
        <van-checkbox-group ref="checkboxGroup" v-model="checkedValue">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in options"
              clickable
              :key="item.code"
              :title="item.name"
              @click="toggle(item, index)"
            >
              <template #right-icon>
                <van-checkbox
                  :name="item.code"
                  ref="checkboxes"
                  shape="square"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
    </van-popup>
  </div>
</template>
<script>
// 调用字典的接口
import { 接口} from "@/api/index.js";
export default {
  name: "v-rolename",
  components: {},
  props: {
    disabled: Boolean,
    multiple: {
      type: Boolean,
      default: false,
    },
    sendData: String,
    numField: String,
    keyName: String,
    orgId: String,
    isOrg: Boolean,
    deptId: String,
    isDataAuth: String,
    isSsdw: String,
    ssdwId: String,
    isShowUnit: String,
    isShowUserCode: String,
    selectedCode: String,
  },

  data() {
    return {
      nextUserSearch: "",
      endObj: {},
      endValue: null,
      showPicker: false,
      checkedValue: [],
      options: [],
      selectList: [],
    };
  },

  created() {
    debugger;
    this.init();
  },

  methods: {
    onSearch() {
      if (this.nextUserSearch) {
        this.options = this.options.filter((item) => {
          if (item.name.includes(this.nextUserSearch)) {
            return item;
          }
        });
      } else {
        接口(
          this.orgId,
          this.sendData,
          this.isOrg,
          this.deptId,
          this.isDataAuth,
          this.isSsdw,
          this.ssdwId,
          this.isShowUnit,
          this.isShowUserCode
        )
          .then((result) => {
            this.options = result.data;
          })
          .catch((err) => {
            console.log("人员报错");
          });
      }
    },
    async init() {
      const self = this;
      const res = await 接口(
        self.orgId,
        self.sendData,
        self.isOrg,
        self.deptId,
        self.isDataAuth,
        self.isSsdw,
        self.ssdwId,
        self.isShowUnit,
        self.isShowUserCode
      );
      self.options = res.data;
      if (self.selectedCode) {
        if (self.selectedCode.includes(",")) {
          var arr = self.selectedCode.split(",");
          for (let z = 0; z < arr.length; z++) {
            for (let l = 0; l < self.options.length; l++) {
              if (self.options[l].code == arr[z]) {
                self.selectList.push(self.options[l]);
              }
            }
          }
        } else {
          for (let i = 0; i < self.options.length; i++) {
            if (self.options[i].code == self.selectedCode) {
              self.selectList.push(self.options[i]);
            }
          }
        }
      }
      self.endSure();
    },
    show() {
      debugger;
      if (!this.disabled) {
        this.showPicker = true;
        if (this.selectedCode?.includes(",")) {
          this.checkedValue = this.selectedCode.split(",");
        } else {
          let arr = [];
          arr.push(this.selectedCode);
          this.checkedValue = arr;
        }
      }
    },
    closePopup(type) {
      if (type == 1) {
        this.showPicker = false;
      } else {
        this.endSure();
      }
    },
    onConfirm(val) {
      debugger;
      this.endObj = {};
      this.endObj.code = val.code;
      this.endObj.name = val.name;
      this.endValue = this.endObj.name;
      this.$emit("isGetSelectValue", this.keyName, this.endObj, this.numField);
      this.showPicker = false;
    },
    toggle(item) {
      // debugger;
      var idx = this.selectList.findIndex((ele) => ele.code === item.code);
      if (idx > -1) {
        this.selectList.splice(idx, 1);
      } else {
        this.selectList.push(item);
      }
    },
    endSure() {
      var codeList = [];
      var nameList = [];
      this.endObj = {};
      var arr1 = this.selectList.map((e) => e.code);
      var arr2 = this.checkedValue.map((e) => e.code);
      if (this.selectList.length.length != 0) {
        for (let i = 0; i < this.selectList.length; i++) {
          codeList.push(this.selectList[i].code);
          nameList.push(this.selectList[i].name);
        }
        this.endObj.code = codeList.toString();
        this.endObj.name = nameList.toString();
      }
      this.endValue = this.endObj.name;
      this.$emit("isGetSelectValue", this.keyName, this.endObj, this.numField);
      this.showPicker = false;
    },
  },
  watch: {
    showPicker(val) {
      if (!val) {
        this.nextUserSearch = "";
        this.onSearch();
        if (this.selectedCode?.includes(",")) {
          this.checkedValue = this.selectedCode.split(",");
        } else {
          let arr = [];
          arr.push(this.selectedCode);
          this.checkedValue = arr;
        }
      }
    },
    nextUserSearch(val) {
      this.onSearch();
    },
  },
};
</script>