front-end/hd/src/components/module/item-list-layer.vue

<template>
  <el-dialog title="选择花材" :visible.sync="selDialog" :close-on-click-modal="false" :append-to-body="true" @close="$emit('update:show', false)" width="950px">
    <div class="recharge-modal-content">
      <el-checkbox-group v-model="checkList" class="radio-wrap" >

        <x-crud class="liu-crud-wrap" @load="onLoad">
          <template #table-column-radio="{scope}">
            <div>
              <el-checkbox v-if="scope.row.select == 2" disabled :label="scope.row" >{{scope.row.id}}</el-checkbox>
              <el-checkbox v-else :label="scope.row" @click.stop.native="stop" >{{scope.row.id}}</el-checkbox>
            </div>
          </template>

          <template #table-column-select="{scope}">
            <span v-if="scope.row.select == 2">✔</span>
            <span v-else></span>
          </template>

          <template #table-column-stockWarning="{scope}">
            <el-input v-model="scope.row.stockWarning" @click.stop.native="stop" placeholder="库存预警值" size="small"></el-input>
          </template>

          <template #table-column-cost="{scope}">
            <el-input v-model="scope.row.cost" placeholder="成本价" @click.stop.native="stop" size="small" ></el-input>
          </template>

          <template #table-column-addPrice="{scope}">
            <el-input v-model="scope.row.addPrice" placeholder="加价" @click.stop.native="stop" size="small"></el-input>
          </template>

          <template #table-column-cover="{scope}">
            <div>
              <cl-avatar shape="square" :size="40" :src="scope.row.cover | default_avatar" :style="{ margin: 'auto' }" ></cl-avatar>
            </div>
          </template>
        </x-crud>

      </el-checkbox-group>

      <div>
        <span>花材分类：</span>
        <el-select style="width:300px;" v-model="sonClassName" size="small" placeholder="请选择分类" @change="selClassFn">
          <el-option v-for="(item, index) in itemClassList" :key="index" :value="item.name">{{ item.name }}</el-option>
        </el-select>
      </div>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="resetForm" >取 消</el-button>
      <el-button type="primary" size="small" @click="confirmFn">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
export default {
  name: 'sj-list-layer',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    classId: {
      type: Number,
      default: 0
    },
    multi: {
      type: Boolean,
      default: false
    },
    className:{
      type: String,
      default:''
    }
  },
  data () {
    return {
      selDialog: false,
      ruleForm: {},
      checkList: [],
      list: [],
      //分类列表
			itemClassList: [],
      sonClassId:0,
      sonClassName:''
    };
  },
  computed: {
  },
  watch: {
    show () {
      this.selDialog = this.show;
    }
  },
  created () { },
  methods: {
    stop(){},
    selClassFn(val){
			let index = this.itemClassList.findIndex((e) => e.name == val)
			this.sonClassId = this.itemClassList[index].id
    },
	getAllClass() {
			if (!this.$util.isEmpty(this.itemClassList)) {
				return this.itemClassList
			}
			this.$service.itemClass.getAllClass().then((res) => {
				this.itemClassList = res.list
			})
		},
    confirmFn () {
      if (this.checkList.length == 0) {
        this.$message.warning('请选择花材')
        return false
      }
      if(this.sonClassId == 0){
        this.$message.warning('请选择分类')
        return false
      }
      this.$emit('confirm', {list:this.checkList,classId:this.sonClassId})
    },
    resetForm () {
      this.$emit('cancel');
    },
    selectItem(row){
      console.log(row)
                //已经选过
                if(row.select == 2){
                  return false
                }
               let index = this.checkList.findIndex(e => e.id == row.id)
               if(index === -1){
                this.checkList = [row,...this.checkList]
               }else{
  　　　　　　　　this.checkList.splice(index,1)
               }
    },
    onLoad ({ ctx, app }) {

      this.sonClassId = this.classId
      this.sonClassName = this.className

      //分类列表
      this.getAllClass()

      this.app = app;
      ctx.service(this.$service.ptItem)
        .set('table', {
          columns: [
            {
              prop: 'radio',
              label: '选择',
              align: 'center',
              width: 110
            },
            {
              prop: 'cover',
              label: '图片',
              align: 'center',
              width: 120
            },
            {
              prop: 'name',
              label: '名称',
              align: 'center'
            },
            {
              prop: 'stockWarning',
              label: '库存预警值',
              align: 'center'
            },
            {
              prop: 'cost',
              label: '成本价',
              align: 'center'
            },
            {
              prop: 'addPrice',
              label: '加价',
              align: 'center'
            },
            {
              prop: 'weight',
              label: '重量',
              align: 'center'
            },
            {
              prop: 'select',
              label: '已添加',
              align: 'center'
            }
          ],
					on: {
						'row-click': (row, column) => {
              this.selectItem(row)
						}
					},
          // 操作列
          op: {
            visible: false // 是否显示
          }
        })
        .set('dict', {
          search: {
            keyWord: 'name'
          }
        })
        .set('search', {
          key: {
            placeholder: '花材名称，支持拼音首字母搜索'
          }
        })
        .set('layout', [
          ['slot-tabs'],
          ['search-key', 'flex1', 'refresh-btn'],
          ['data-table'],
          ['flex1', 'pagination']
        ])
        .on('refresh', async (params, { next, render }) => {
          // 继续执行刷新
          let { list } = await next(params);
          list.map((e, index) => {
            e.index = index;
          });
          this.list = list;
          render(list);
        })
        .done();
      app.refresh({ type: this.tabIndex });
    }
  }
};
</script>
<style lang="scss">
// 列表
.radio-wrap {
  display: block;
}
.el-dialog{
	margin: 10px auto 10px !important;
}
</style>