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="data.note1" :placeholder="'请输入' + name" />
      <!-- 下拉框 -->
       <el-select
        v-else-if="(type === 'select' && name !== '归属部门' && name !== '使用方式') || type == 'radio'"
        style="width: 240px"
         v-model:value="data.note1"
        :placeholder="'请选择' + name">
        <el-option
          :value="itemSelect.dictLabel"
          v-for="(itemSelect, indexSelect) in options"
          :key="indexSelect">
        {{ itemSelect.dictLabel }}
        </el-option>
      </el-select>
      <el-select
        v-else-if="(type === 'select' && name === '归属部门')"
        style="width: 240px"
         v-model:value="data.note1"
        filterable
        placeholder="请输入关键词"
        :loading="loading">
        <el-option
          v-for="(itemSelect) in options"
          :key="itemSelect.id"
          :label="itemSelect.name"
          :value="itemSelect.id">
        {{ itemSelect.name }}
        </el-option>
      </el-select>
      <el-select
        v-else-if="(type === 'select' && name === '使用方式')"
       style="width: 240px"
         v-model:value="data.note1"
        :placeholder="'请选择' + name"
        @change="showTypeClick"
        >
        <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" @change='chekBoxChange'>
        <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="data.note1" 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-textarea v-else-if="type == 'textArea'"  v-model:value="data.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + name" />
    </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,
      showType: ''
    }
  },
  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 }) => {
            const dataList = []
            res.data.list.forEach((element) => {
              dataList.push(element)
            })
            this.options = dataList
          })
          .catch(() => {})
      } else if (this.data.name === '归属部门') {
        this.$http.get('/sys/dept/all').then(res => {
          const dataList = []
          res.data.data.forEach((element) => {
            dataList.push(element)
          })
          this.options = dataList
          if (!this.data.note1) {
            this.$http.get('/sys/user/info').then(({ data: res }) => {
              console.log(res.data)
              this.data.note1 = res.data.deptId
            })
          }
        })
      } else if (this.data.name === '部门联系人') {
        // this.$http.get('/sys/dept/all').then(res => {
        //   const dataList = []
        //   res.data.data.forEach((element) => {
        //     dataList.push(element)
        //   })
        // this.options = dataList
        if (!this.data.note1) {
          this.$http.get('/sys/user/info').then(({ data: res }) => {
            console.log(res.data)
            this.data.note1 = res.data.realName || ''
          })
        }
        // })
      } else if (this.data.name === '部门联系人电话') {
        // this.$http.get('/sys/dept/all').then(res => {
        //   const dataList = []
        //   res.data.data.forEach((element) => {
        //     dataList.push(element)
        //   })
        //   this.options = dataList
        if (!this.data.note1) {
          this.$http.get('/sys/user/info').then(({ data: res }) => {
            console.log(res.data)
            this.data.note1 = res.data.mobile || ''
          })
        }
        // })
      }
    },
    chekBoxChange (list) {
      let str = ''
      list.map((val, index) => {
        str += val
        if (index < list.length - 1) {
          str += ';'
        }
      })
      this.data.note1 = str
    },
    showTypeClick (e) {
      this.showType = e
      console.log(e)
      this.$emit('show-type', this.showType)
    }
  },
  created () {
    if (this.data.name === '应用领域') {
      if (this.data.note1) {
        this.valueCheckBox = this.data.note1.split(';')
      }
    } else if (this.data.name === '发布端') {
      if (this.data.note1) {
        this.valueCheckBox = this.data.note1.split(';')
      }
    }
  },
  mounted () {
    this.selectOptions()
    this.showTypeClick('调用接口')
  }
}
</script>
<style lang='scss' scoped>
#inputSelectCheckbox {
  // margin-top: 20px;
  width: calc(100% - 105px);
  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: 100%;
  }
  ::v-deep .el-input__inner {
    resize: none;
    width: 100%;
  }
  ::v-deep .el-textarea {
    width: 100%;
  }
  ::v-deep .el-textarea__inner {
    width: 100%;
    height: 76px;
    min-height: 32px;
    resize: none;
  }
  ::v-deep .el-input__count {
    bottom: -20px;
    right: 5px;
  }
  ::v-deep .el-checkbox-group {
    width: 100%;
    display: grid;
    margin-top: -5px;
    grid-template-columns: 1fr 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: 10px 5px 0;
    font-weight: 500;
  }
  ::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
    background: #0087ff;
    color: #fff;
    box-shadow: unset;
  }
}
</style>