lanju-app/src/components/attrs-setup/attrs-setup.vue

<template>
  <view class="jPicker">
    <u-modal v-model="isshow" class="modal" :show-cancel-button="true" :show-title="false" @cancel="cancel" @confirm="confirm">
      <div class="upload-name">
        <u-field v-for="(item, index) in tagslist" :key="index" v-model="item.numberall" :label="item.label" placeholder="" @input="handleInput(index)" :focus="isfocus"></u-field>
      </div>
    </u-modal>
    <u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
  </view>
</template>

<script lang="ts">
import { session } from '@/store/modules/session';
/**
 * 选择组件
 * @property {Array} options 选择数组
 * @property {String} showKey 显示的对象键名
 * @property {String} val 默认选中下标
 * @property {String} valKey 取值的对象键名
 * @property {Boolean} disabled 是否只读
 * * @property {String} moren 是否只读
 * @event {Function} position 搜索框位置
 * @event {Function} sure 确认事件
 * @example <jPicker :disabled="false" class="cont" @sure="bindPickerChange($event,'TYPE')" showKey="Name" valKey="Value" :val="CurrentType" :options="FilterArray" />
 */

export default {
  components: {
    // #ifdef H5
    // #endif
  },
  name: 'badType',
  data() {
    return {
      show: false,
      mode: 'date',
      tagslist: [],
      selectList1: {},
      //moren: this.moren,
      isshow: false,
      tagsvalue: '111',
      isfocus: false,
      searchPosition: 'middle',
      //picker样式
      // unSelStyle:'',
      //'background-color:rgba(0, 74, 255, 0.44);',//'background-color:rgba(220, 250, 9, 0.44);',rgba(250, 9, 9, 0.44)
      selStyle: 'height:50px;',
      keyWord: '',
      mobile: '',
      itemindex: '',
      tagslistcopy: [],
      moren1: '接受质量限',
    };
  },
  props: ['options', 'moren', 'showKey', 'valKey', 'val', 'position', 'disabled', 'bgColor', 'sureColor', 'focus'],
  //选项数组，列表显示的对象键名，取值的对象键名,默认选中值,搜索框位置,是否禁用,整体背景色,确认键颜色
  watch: {
    options(n) {
      console.log('22998', n);
    },
    // 原始bug
    // uniapp 无法监听prop对象,使用computed替代方案解决组件缓存问题
    reset(v) {
      if (v === '' || v === undefined || v === null) {
        this.nSel = -1;
      }
    },
  },
  computed: {
    reset() {
      return this.val;
    },
  },
  methods: {
    async selectProductlocCode3(e: any) {
      this.selectList1 = e.pickerName;
      let query = {
        factoryCode: session.PoolName,
        checkManCode: session.userName,
        checkStatus: 0,
        checkType: this.selectList.value,
        checkLoc: this.selectList1.value,
      };
      this.getDefectListPDA();
      await this.model.getCheckTaskListall(query);
      this.list = this.model.CheckTaskListall;
    },
    open() {
      this.show = true;
      // this.tagslist = JSON.parse(JSON.stringify(item.babtype));
      // this.tagslistcopy = JSON.parse(JSON.stringify(item.babtype));
    },
    change(e) {
      console.log(e);
      // this.tagslist = JSON.parse(JSON.stringify(item.babtype));
      // this.tagslistcopy = JSON.parse(JSON.stringify(item.babtype));
    },
    handleInput(index) {
      let value = this.tagslist[index].numberall;
      // 移除非数字字符
      const newValue = value.replace(/[^\d]/g, '');
      // 更新输入框的值
      this.$set(this.tagslist, index, { ...this.tagslist[index], numberall: newValue });
    },
    cancel() {
      console.log('22998111', this.tagslist, this.itemindex);
      this.tagslist = this.tagslistcopy;
      this.tagslist.forEach((item) => {
        if (item.numberall == '') {
          item.numberall = 0;
        }
      });
      this.$emit('bindtypelist', this.tagslist, this.itemindex);
    },
    confirm() {
      this.tagslist.forEach((item) => {
        if (item.numberall == '') {
          item.numberall = 0;
        }
      });
      this.$emit('bindtypelist', this.tagslist, this.itemindex);
    },
  },
};
</script>

<style lang="scss" scoped>
.jPicker {
  width: 100%;

  .showLine {
    // border-left:1px solid #000000;
    width: 100%;
    display: inline-block;
  }
  .upload-name {
    padding: 10px 15px;
  }
}
</style>