hi-ucs/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue

<!--
 *传参示例
 html:
 <input-select-checkbox
 :type="typeSon"
 :name="nameSon"
:value="valueSon"
:options="optionSon">
</input-select-checkbox>
js:
  this.typeSon = 'select'//类型
  this.nameSon = '算法描述'//名称
  this.valueSon = '这是一个描述'//内容
  this.optionSon = ['1', '2', '3']//选项
-->
<template>
    <div id="inputSelectCheckbox">
      <!-- input框 -->
      <a-input v-if="type == 'input'" v-model:value="value" :placeholder="'请输入' + name" />
      <!-- 下拉框 -->
       <el-select
        v-else-if="type === 'select'"
        style="width: 240px"
        v-model="value"
        :placeholder="'请选择' + name">
        <el-option
          :value="itemSelect.dictLabel"
          v-for="(itemSelect, indexSelect) in options"
          :key="indexSelect">
        {{ itemSelect.dictLabel }}
        </el-option>
      </el-select>
      <!-- 多选 -->
      <div
        v-else-if="type === 'checkBox'"
      >
        <el-checkbox-group v-model="valueCheckBox">
        <el-checkbox-button v-for="val in options" :label="val.dictLabel" :key="val.dictLabel">{{val.dictLabel}}</el-checkbox-button>
      </el-checkbox-group>
      </div>
      <!-- 不可点的input框 -->
      <el-input
        v-else-if="type === 'disabled'"
        v-model="value"
        :placeholder="'请输入' + name"
        :disabled="true"
      />
      <!-- 单选 -->
       <el-radio-group v-model="value" v-else-if="type == 'radio'">
        <el-radio v-for="item in options" :label="item.dictLabel" :key="item.dictLabel">{{item.dictLabel}}</el-radio>
      </el-radio-group>
      <!-- <a-radio-group

          v-model:value="value"
          :options="item.options.dictLabel"
        /> -->
      <!-- 描述框 -->
      <!-- <a-textarea  v-model:value="value" :showCount="true"
               /> -->
    <a-textarea v-else-if="type == 'textArea'" v-model:value="value" :showCount="true" :maxlength="200" :placeholder="'请填写' + name"
            />
      <!-- <el-input  type="textarea" :maxlength="200" v-model="value" :placeholder="'请输入' + item.name" ></el-input> -->
    </div>
</template>
<script>
export default {
  name: 'inputSelectCheckbox',
  components: {

  },
  props: {
    type: String,
    data: Array,
    name: String,
    value: String,
    options: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      // 多选放数据的数组
      valueCheckBox: [],
      // 单选数据
      regionSelect: '',
      showKey: 0
    }
  },
  methods: {
    selectOptions () {
      if (this.data.isLinkToDic === 'true' && this.data.linkValue) {
        this.$http
          .get(`/sys/dict/data/page?page=1&limit=20&dictTypeId=${this.data.linkValue}&deFlage=0`).then(({ data: res }) => {
            console.log(res, 'res')
            const dataList = []
            res.data.list.forEach((element) => {
              dataList.push(element)
              console.log(dataList, 'this.options')
            })
            this.options = dataList
            console.log(this.options)
          })
          .catch(() => {})
      }
    }
  },
  mounted () {
    this.selectOptions()
  }
}
</script>
<style lang='scss' scoped>
#inputSelectCheckbox {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  span:first-child {
    display: block;
    width: 120px;
  }
  ::v-deep .el-select {
    .el-input__inner {
      resize: none;
      width: 240px;
    }
  }
  ::v-deep .ant-input {
    // width: 570px;
  }
  ::v-deep .el-input__inner {
    resize: none;
    // width: 570px;
  }
  ::v-deep .el-textarea {
    width: 570px;
  }
  ::v-deep .el-textarea__inner {
    width: 570px;
    height: 76px;
    min-height: 32px;
    resize: none;
  }
  ::v-deep .el-input__count {
    bottom: -20px;
    right: 5px;
  }
  ::v-deep .el-checkbox-group {
    width: 570px;
    display: grid;
    margin-top: -5px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  ::v-deep .el-checkbox-button__inner {
    cursor: pointer;
    font-size: 14px;
    width: 90px;
    height: 26px;
    border-radius: 13px;
    color: #333333;
    background: #f5f5f5;
    border: 1px #cccccc solid;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-weight: 500;
  }
  ::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
    background: #0087ff;
    color: #fff;
    box-shadow: unset;
  }
}
</style>