purchase-vue3/src/views/serviceParam/supplierCat/modal.vue

<script setup lang="ts">
import { ref, shallowRef } from "vue"
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"
import { httpAdd } from "/@/api/serviceParam/supplierCat";
import { SupplierQuery } from "/@/components/BasicForm"
import { rules } from "./config/_options"
import { useVModel } from "@vueuse/core"
import { useTask } from "/@/hooks/core"
import { ElForm, ElMessage } from "element-plus"

import CategoryModal from "./category-modal.vue"

const initialData = ():Record<string, any> => ({ 
  supplierNo: '',
  cat_id: []
})

const emit = defineEmits(['refresh'])
const props = defineProps<{ visible: boolean; id: string, type: string }>()

const formData = ref(initialData())
const formRef = ref<InstanceType<typeof ElForm> | null>(null)

const visible = useVModel(props, 'visible')

const categoryVisible = shallowRef(false)
const supportCreateTask = useTask({ success })

function success(){
  visible.value = false
  emit('refresh')
}

function handleCategoryChange(values: Record<string, any>[]){
  const ids =  formData.value.cat_id.map(({id}) => id)
  for(const value of values){
    if(ids.includes(value.id)){ continue }
    formData.value.cat_id.push({ ...value })
  }
}

async function onSubmit(){
  try {
    console.log(1)
   await formRef.value.validate()
   const { supplierNo, cat_id } = formData.value
  
   if(cat_id.length === 0){
    ElMessage.warning('至少添加一个分类')
    return
   }

   supportCreateTask
   .run(httpAdd({
    supplierNo,
    cat_id: cat_id.map(({id}) => id)
   }))
  }catch(err){
    console.log(err)
  }
}
</script>

<template>
  <ElDialog v-model="visible" title="新建供应商支持分类" center>
    <ElForm 
      label-width="100px" 
      :rules="rules" 
      :model="formData" 
      :disabled="type === 'preview'" 
      ref="formRef"
    >
      <ElFormItem label="供应商" prop="supplierNo">
        <SupplierQuery v-model="formData.supplierNo" placeholder="供应商" />
      </ElFormItem>

      <ElFormItem label="商品分类">
        <ElTable border size="small" :data="formData.cat_id">
          <ElTableColumn label="序号" width="80px" type="index" show-overflow-tooltip />
          <ElTableColumn label="分类名称" prop="search" show-overflow-tooltip />
          <ElTableColumn label="操作" width="80px" show-overflow-tooltip>
            <template #header>
              <div class="flex justify-between">
                <span>操作</span>
                <ElButton 
                  link 
                  type="primary" 
                  size="small" 
                  :icon="useRenderIcon('add')" 
                  @click="categoryVisible = true"
                />
              </div> 
            </template>

            <template #="{ $index }">
              <ElButton 
                link 
                type="danger"
                size="small"
                :icon="useRenderIcon('delete')"
                @click="formData.cat_id.splice($index, 1)"></ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElFormItem>
      

      <ElFormItem>
        <div class="w-full flex justify-end">
          <ElButton type="primary" :loading="supportCreateTask.loading" @click="onSubmit">提交</ElButton>
        </div>
      </ElFormItem>
    </ElForm>

    <CategoryModal 
      v-model:visible="categoryVisible" 
      @change="handleCategoryChange"
    />
  </ElDialog>
</template>