front-end/ghs/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: '',
      newApp: ''
    };
  },
  computed: {
  },
  watch: {
    show (val) {
      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 () {
      this.$service.itemClass.getAllClass({pageSize: 1000}).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(1212121121)
      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.app = app

      //分类列表
      this.getAllClass()

      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: 'search'
          }
        })
        .set('search', {
          key: {
            placeholder: '花材名称，支持拼音首字母搜索'
          }
        })
        .set('pagination', {
          size: 6
        })
        .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();
    }
  }
};
</script>
<style lang="scss">
// 列表
.radio-wrap {
  display: block;
}
.el-dialog{
  //margin-top: 10px !important;
  margin: 10px auto 10px !important;
}
</style>