BMS/bms-front/src/views/price/basic/redline/components/RedlineFormDialog.vue

<template>
  <el-dialog :title="title" v-model="visible" width="640px" append-to-body>
    <basic-form ref="formRef" v-model="form" :schemas="schemas" label-width="100px" />
    <template #footer>
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import BasicForm from '@/components/BasicForm'
import { getRedline, addRedline, updateRedline } from '@/api/price/redline'

const emit = defineEmits(['success'])
const { proxy } = getCurrentInstance()

const formRef = ref()
const visible = ref(false)
const title = ref('')
const form = ref(emptyForm())

const schemas = computed(() => [
  {
    label: '产品代码',
    prop: 'productCode',
    component: 'input',
    placeholder: '如 WSP037',
    span: 12,
    width: '100%',
    disabled: !!form.value.productId,
    props: { maxlength: 20 },
    rules: [{ required: true, message: '产品代码不能为空', trigger: 'blur' }]
  },
  {
    label: '产品名称',
    prop: 'productName',
    component: 'input',
    placeholder: '产品名称',
    span: 12,
    width: '100%',
    props: { maxlength: 100 },
    rules: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }]
  },
  {
    label: '时效等级',
    prop: 'serviceLevel',
    component: 'input',
    placeholder: '如 标准',
    span: 12,
    width: '100%',
    props: { maxlength: 20 }
  },
  {
    label: '走货属性',
    prop: 'cargoAttr',
    component: 'input',
    placeholder: '普货/带电等',
    span: 12,
    width: '100%',
    props: { maxlength: 100 }
  },
  {
    label: '目的区域',
    prop: 'destRegion',
    component: 'input',
    placeholder: '如 欧盟',
    span: 12,
    width: '100%',
    props: { maxlength: 50 }
  },
  // {
  //   label: '税模式',
  //   prop: 'taxMode',
  //   component: 'select',
  //   placeholder: '请选择',
  //   dict: 'bms_tax_mode',
  //   span: 12,
  //   width: '100%',
  //   rules: [{ required: true, message: '请选择税模式', trigger: 'change' }]
  // },
  {
    label: '生效时间',
    prop: 'effectiveDate',
    component: 'datetime',
    placeholder: '选择时间',
    span: 12,
    width: '100%',
    rules: [{ required: true, message: '生效时间不能为空', trigger: 'change' }]
  },
  {
    label: '失效时间',
    prop: 'expireDate',
    component: 'datetime',
    placeholder: '选择时间',
    span: 12,
    width: '100%'
  },
  {
    label: '更新内容',
    prop: 'updateNote',
    component: 'textarea',
    span: 24,
    width: '100%',
    props: { rows: 2, maxlength: 500 }
  },
  {
    label: '备注',
    prop: 'remark',
    component: 'textarea',
    span: 24,
    width: '100%',
    props: { rows: 2, maxlength: 500 }
  }
])

function emptyForm() {
  return {
    productId: undefined,
    productCode: undefined,
    productName: undefined,
    serviceLevel: undefined,
    cargoAttr: undefined,
    destRegion: undefined,
    updateNote: undefined,
    taxMode: 'TAX_INCLUDED',
    effectiveDate: undefined,
    expireDate: undefined,
    status: '0',
    remark: undefined
  }
}

function reset() {
  form.value = emptyForm()
  nextTick(() => formRef.value?.clearValidate())
}

function open(row) {
  reset()
  if (!row) {
    title.value = '新建红线价'
    visible.value = true
    return
  }
  getRedline(row.productId).then(res => {
    form.value = { ...emptyForm(), ...(res.data || {}) }
    title.value = '修改产品'
    visible.value = true
    nextTick(() => formRef.value?.clearValidate())
  })
}

function submitForm() {
  formRef.value.validate(valid => {
    if (!valid) return
    const req = form.value.productId ? updateRedline(form.value) : addRedline(form.value)
    req.then(() => {
      proxy.$modal.msgSuccess('操作成功')
      visible.value = false
      emit('success')
    })
  })
}

defineExpose({ open })
</script>