shuiguoAdmin/src/views/Store/area/components/Write.vue

<script setup lang="tsx">
import { watch, ref, onMounted } from 'vue'
import {  productUnit } from '@/api/goods/types'
import {
  getProductUnitDetail,
  addProductUnit,
  putProductUnit,
  getUnitList
} from '@/api/goods'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElRadioGroup,
  ElRadio,
  ElSelect,
  ElOption
} from 'element-plus'
import type {  FormInstance } from 'element-plus'
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  title: {
    type: String,
    default: ''
  }
})
const modelValue = defineModel<boolean>()
const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['submit'])
const submit = async () => {
  if (ruleFormRef.value) {
    const valid = await ruleFormRef.value.validate((valid, fields) => {
      // console.log(fields, 'fields')
      if (!valid) {
        console.log('error submit!', fields)
      }
    })
    if (valid) {
      loadingData.value = true
      try {
        let re: any = {}
        if (form.value.id > 0) {
          re = await putProductUnit(form.value)
        } else if (form.value.id == 0) {
          re = await addProductUnit(form.value)
        }
        if (re.status == 200) {
          ElMessage({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
        }
        getUnitLists()
        form.value = {
          name: '',
          id: 0,
          type: 'area',
          pid: 0,
          sort: 0,
          is_show: 1,
          path: '',
          is_weigh: 0
        }
        emit('submit')
      } catch (error) {
        console.log(error)
      } finally {
        loadingData.value = false
      }
    }
  }
}
const loadingData = ref(false)
watch(
  () => props.id,
  async (value) => {
    console.log('zhixin');
    
    if (value * 1 === 0) return
    loadingData.value = true
    const res = await getProductUnitDetail(value)
    form.value = res.data
    loadingData.value = false
  },
  {
    deep: true,
    immediate: true
  }
)
const form = ref<productUnit>({
  name: '',
  id: 0,
  type: 'area',
  pid: 0,
  sort: 0,
  is_show: 1,
  path: '',
  is_weigh: 0
})
const options = ref<any[]>([])
const getUnitLists = async () => {
  // getUnitList()
  let res = await getUnitList({
    page: 1,
    limit: 100,
    type: 'area',
    is_show: 1,
    pid: 0
  })
  options.value = [{ value: 0, label: '顶级' }].concat(getOp(res.data.list))
}
const getOp = (arr: any[]) => {
  let arr1 = arr.map((item) => {
    let obj = {
      value: item.id,
      label: item.name
    }
    return obj
  })
  return arr1
}
onMounted(() => {
  getUnitLists()
})
</script>

<template>
  <Dialog v-model="modelValue" :title="title" width="600px">
    <el-form v-loading="loadingData" ref="ruleFormRef" :model="form" label-width="auto">
      <el-form-item
        prop="name"
        label="区域名称"
        :rules="[{ required: true, message: '区域名称', trigger: 'blur' }]"
      >
        <el-input v-model="form.name" />
      </el-form-item>
      <!-- <el-cascader :options="options" :props="props1" clearable /> -->
      <el-form-item prop="pid" label="上级区域">
        <el-select v-model="form.pid" class="m-2" placeholder="Select" size="large">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="sort" label="排序">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item prop="is_show" label="是否显示">
        <el-radio-group v-model="form.is_show" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <BaseButton type="primary" :loading="loadingData" @click="submit">
        {{ t('exampleDemo.save') }}
      </BaseButton>
      <BaseButton @click="modelValue = false">{{ t('dialogDemo.close') }}</BaseButton>
    </template>
  </Dialog>
</template>