cashier-web/src/views/online-shop/components/addGoodsGroup.vue

<template>
  <el-dialog :title="forms.id ? '编辑分组' : '添加分组'" width="600px" v-model="visible" @close="onClose">
    <el-form :model="forms" label-width="120px" ref="elFormref" :rules="rules">
      <el-form-item label="分组名称" prop="name">
        <el-input v-model="forms.name" />
      </el-form-item>
      <el-form-item label="选择商品">
        <el-button type="primary" icon="Plus" @click="addgoods">添加商品</el-button>
      </el-form-item>
      <el-form-item label="" v-if="selectData.length">
        <!-- 选责商品列表 -->
        <selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
      </el-form-item>
      <el-form-item label="分组状态">
        <el-radio-group v-model="forms.status">
          <el-radio :value="1" label="启用" />
          <el-radio :value="0" label="禁用" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="售卖时间管控">
        <el-radio-group v-model="forms.useTime">
          <el-radio :value="1" label="启用" />
          <el-radio :value="0" label="禁用" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="时间选择" v-if="forms.useTime == 1">
        <el-time-picker value-format="HH:mm:ss" v-model="forms.time" is-range range-separator="到"
          start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item label="排列方式">
        <el-radio-group v-model="forms.sortMode">
          <el-radio value="0" label="默认" />
          <el-radio value="1" label="价格由高到低" />
          <el-radio value="2" label="价格由低到高" />
          <el-radio value="3" label="销量由高到低" />
          <el-radio value="4" label="销量由低到高" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分组排序">
        <el-input-number v-model="forms.sort" controls-position="right" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addConfirm" :loading="confirmLoading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增添加商品 -->
  <GoodsSelect ref="GoodsSelectRef" @success="e => selectData = e" />
</template>

<script setup>
import _ from 'lodash'
import { ref } from 'vue'
import selectGoodslist from '../goodsGroupconfig/selectGoodslist.vue';
import UserAPI from "@/api/onlineShop/goodsGroupconfig";
import GoodsSelect from '@/components/GoodsSelect/index.vue'

const visible = ref(false)
const GoodsSelectRef = ref(null)
const elFormref = ref(null);

let selectData = ref([]);
const formsObj = {
  name: "",
  status: 1,
  useTime: 0,
  sortMode: "0",
  sort: 1,
  time: "",
  saleEndTime: '',
  saleStartTime: '',
  productIds: '',
  productList: ''
}
let forms = ref(_.cloneDeep(formsObj));

const rules = ref({
  name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
});

// 重置表单
function onClose() {
  forms.value = _.cloneDeep(formsObj)
  elFormref.value.resetFields()
  selectData.value = []
}

// 添加商品
async function addgoods() {
  GoodsSelectRef.value.show(selectData.value);
}

// 删除商品
function deleteItem(data) {
  selectData.value = data;
}

const emit = defineEmits(['success'])
const confirmLoading = ref(false)
// 添加编辑商品分组
function addConfirm() {
  elFormref.value.validate(async (valid, fields) => {
    try {
      if (valid) {
        let obj = {
          ...forms.value,
          productList: selectData.value,
        };
        // 商品选择的合集
        if (selectData.value.length) {
          let arr = [];
          selectData.value.forEach((item, index) => {
            arr.push(item.id);
          });
          obj.productIds = arr;
        }
        console.log(obj, "商品分组的参数");
        if (obj.time && obj.time.length) {
          obj.saleStartTime = obj.time[0];
          obj.saleEndTime = obj.time[1];
        }
        if (forms.value.id) {
          if (obj.useTime == 0) {
            obj.saleStartTime = null;
            obj.saleEndTime = null;
          }
          let res = await UserAPI.update(obj);
          if (res.code == 200) {
            ElMessage.success("编辑成功");
          }
        } else {
          let res = await UserAPI.addunit(obj);
          if (res.code == 200) {
            ElMessage.success("添加成功");
          }
        }
        visible.value = false
        emit('success')
      } else {
        console.log("error submit!", fields);
      }
    } catch (error) {
      console.log(error);
    }
  });
}

function open(obj) {
  visible.value = true
  if (obj && obj.id) {
    forms.value = _.cloneDeep(obj)
    selectData.value = obj.productList || []
    forms.value.time = [obj.saleStartTime, obj.saleEndTime]
  }
}

defineExpose({
  open
})
</script>