yiliangyiyun-pc-jj/src/components/editSelect/index.vue

<template>
  <!--  <ws-dropdown
      trigger="click"
      placement="bottom-start"
      style="width: 100%;"
      :hide-on-click="false"
    >
      &lt;!&ndash; 选择框 &ndash;&gt;
      <ws-button class="selectClass">
        <span class="textClass">{{ pleaseChoose.length>0?pleaseChoose:getPleaseChoose }}</span>
        <i class="el-icon-arrow-down el-icon&#45;&#45;right" style="float:right"></i>
      </ws-button>
      &lt;!&ndash; 下拉框 &ndash;&gt;
      <ws-dropdown-menu
        slot="dropdown"
        class="kuangClass"
        :data-stopPropagation="true"
      >
        &lt;!&ndash; 已有内容 &ndash;&gt;
        <ws-dropdown-item
          v-for="(item, index) in unitList"
          :key="index"
          :command="item.constKey"
        >
          <div style="display:flex;width:172px" v-if="item.flag != 'add'">
            &lt;!&ndash; 已有显示 &ndash;&gt;
            <span
              style="width:170px"
              v-if="item.flag == 'delete'"
              @click="selectContract(item, index)"
            >{{
              getLanguage === 'en' &&
              item.constValueEn &&
              item.constValueEn.length > 0
                ? item.constValueEn
                : item.constValue
            }}</span
            >
            &lt;!&ndash; 新增文本框 &ndash;&gt;
            <span style="width:160px" v-if="item.flag == 'check'">
            <ws-input
              v-model="item.constValue"
              clearable
              maxlength="10"
              style="height:24px;width:125px"
            ></ws-input>
          </span>
            &lt;!&ndash; 对号 &ndash;&gt;
            <i
              class="el-icon-check"
              style="line-height: 29px;margin-left:10px"
              v-if="item.flag == 'check'"
              @click="saveClick(item, index)"
            ></i>
            &lt;!&ndash; 编辑 &ndash;&gt;
            <i
              class="el-icon-edit"
              style="line-height: 29px;margin-left:10px"
              v-if="item.flag == 'delete'"
              @click="editClick(item, index)"
            ></i>
            &lt;!&ndash; 删除 &ndash;&gt;
            <i
              class="el-icon-delete"
              style="line-height: 29px;"
              @click="deleteClick(item, index)"
            ></i>
          </div>
        </ws-dropdown-item>
        &lt;!&ndash; 新增按钮 &ndash;&gt;
        <ws-dropdown-item>
          <div class="butClass">
            <ws-button type="primary" @click="addClick()" class="addbutton">{{
              $t('button.add')
              }}</ws-button>
          </div>
        </ws-dropdown-item>
      </ws-dropdown-menu>
    </ws-dropdown>-->
  <el-select v-model="pleaseChoose"
             :placeholder="getPleaseChoose"
             style="width: 100%;"
             filterable
             clearable
             @change="selectContract">
    <el-option v-for="(item,index) in unitList"
               :key="item.constValue"
               :label="getLanguage !== 'en' ? item.constValue : item.constValueEn"
               :value="item.constValue">
      <span class="unit-left"
            style="float: left">
        <span v-if="item.flag == 'delete'"> {{ item.constValue }}</span>
        <!-- 新增文本框 -->
        <div style="width:160px"
             v-if="item.flag !== 'delete'"
             @click.stop>
          <ws-input v-model="item.constValue"
                    clearable
                    maxlength="10"
                    style="width:100%;"></ws-input>
        </div>
      </span>
      <span style="float: right; color: #8492a6; font-size: 13px">
        <!-- 对号 -->
        <i class="el-icon-check"
           style="line-height: 29px;margin-left:10px"
           v-if="item.flag !== 'delete'"
           @click.stop="saveClick(item, index)"></i>
        <!-- 编辑 -->
        <i class="el-icon-edit"
           style="line-height: 29px;margin-left:10px"
           v-if="item.flag == 'delete'"
           @click.stop="editClick(item, index)"></i>
        <!-- 删除 -->
        <i class="el-icon-delete"
           style="line-height: 29px;"
           @click.stop="deleteClick(item, index)"></i>
      </span>
    </el-option>
    <!-- 新增按钮 -->
    <el-option value=""
               label="">
      <div style="text-align: center">
        <ws-button type="primary"
                   @click.stop="addClick">{{$t('button.add')}}</ws-button>
      </div>
    </el-option>
  </el-select>
</template>
<script>
import {
  add,
  edit,
  saveDelete,
  customDropDown
} from '@/model/indexRx'
export default {
  props: [
    'setlanguage', //  当前语言
    'vModel', // 数据绑定
    'vModelType', // 数据绑定类型 id 或者key 默认key
    'type', //  查询类别参数
    'setShowType', // 显示类型
    'row' // 当前行数据
  ],
  data () {
    return {
      unitList: [],
      showName: '',
      showType: true,
      pleaseChoose: '',
      //编辑后的单位
      trainingMethods: {
        constCode: this.type ? this.type : 'MATERIAL_MEASUREMENT_UNIT',
        constKey: '',
        constValue: '',
        id: '',
        compId: localStorage.getItem('ws-pf_compId')
      }
    }
  },
  computed: {
    getLanguage () {
      let language = this.$store.state.app.language
      return language
    },
    getPleaseChoose () {
      return this.$t('common.selected')
    }
  },
  watch: {
    vModel () {
      this.getUnitList()
    }
  },
  mounted () {
    this.getUnitList()
  },
  methods: {
    getUnitList () {
      customDropDown({
        compId: localStorage.getItem('ws-pf_compId'),
        constCode: this.type
      }).toPromise().then(response => {
        this.unitList = response
        let currItem
        this.unitList.forEach((item, index, arr) => {
          item.flag = 'delete'
          if (this.vModel == item.constKey) {
            currItem = item
          }
        })
        //
        if (currItem) {
          this.selectContract(currItem.constValue)
        }
      })
    },
    // =============================================== 可编辑单位增删改查方法区 ===============================================
    // 选中
    selectContract (val) {
      let key = this.unitList.find(item => item.constValue === val).constKey
      this.$emit('update:vModel', key)
      this.pleaseChoose = val
      this.$emit('selectValue', val)
    },
    // 保存
    saveClick (item, index) {
      if (Object.is(item.id, 1)) {
        return
      }
      if (Object.is(this.unitList[index].flag, 'delete')) {
        this.$set(this.unitList, index, { flag: 'check' })
      } else {
        this.$set(this.unitList, index, { flag: 'delete' })
      }
      if (!item.constKey) {
        if (!item.constValue) {
          this.unitList.splice(index, 1)
          return
        }
        this.trainingMethods.constValue = item.constValue
        add(this.trainingMethods).toPromise().then(response => {
          this.getUnitList()
        })
      } else {
        this.trainingMethods.constValue = item.constValue
        this.trainingMethods.id = item.id
        this.trainingMethods.constKey = item.constKey
        edit(this.trainingMethods).toPromise().then(response => {
          this.getUnitList()
        })
      }
    },
    // 编辑
    editClick (item, index) {
      const map = JSON.parse(JSON.stringify(item))
      if (Object.is(item.id, 1)) {
        return
      }
      if (Object.is(this.unitList[index].flag, 'delete')) {
        map.flag = 'check'
        this.$set(this.unitList, index, map)
      } else {
        map.flag = 'delete'
        this.$set(this.unitList, index, map)
      }
    },
    // 删除
    deleteClick (item, index) {
      if (Object.is(item.constKey, 1)) {
        return
      }
      if (!item.constValue) {
        this.unitList.splice(index, 1)
        return
      }
      saveDelete({ id: this.unitList[index].id }).toPromise().then(response => {
        this.getUnitList()
        this.pleaseChoose = ''
      })
    },
    // 新增按钮
    addClick () {
      // let [flag, constValue, constKey] = ['check', '', '']
      // let obj = { flag, constValue, constKey }
      // let objAdd = { flag: 'add', constValue: '新增项目', constKey: '' }
      // let result = this.unitList.filter((item, val, arr) => {
      //   return item.id != '1'
      // })
      // result.push(obj)
      // result.push(objAdd)
      // this.unitList = result
      this.unitList.push({
        flag: 'add',
        constValue: '',
        constKey: ''
      })
    }
    // =============================================== 可编辑单位增删改查方法区 ===============================================
  }
}
</script>

<style lang="scss" scoped>
.unit-left {
  /deep/ .el-input--small .el-input__inner {
    height: 24px;
    line-height: 24px;
  }
}
.selectClass {
  width: 100%;
  height: 32px;
  margin-top: 7px;
}
.textClass {
  float: left;
  line-height: 10px;
  margin-left: -8px;
  margin-top: 2px;
}
.kuangClass {
  width: 200px;
  transform-origin: center top;
  z-index: 2010;
  position: fixed;
  top: 293px;
  left: 458px;
}
/deep/ .el-dropdown-menu__item {
  margin: 5px 0px;
}
.butClass {
  /deep/ .el-button--small {
    width: 167px;
  }
}
/deep/.el-input--medium {
  width: 100% !important;
}
</style>