wms-antdvue/.svn/pristine/ba/ba97d655ef3e20a93418e6cc19a49de8c29302e0.svn-base

<template>
  <a-modal
      v-model:visible="props.visible"
      :title="props.layoutId?'编辑':'新增'"
      width="800px"
       @cancel="dialogClose"
  >
    <a-form
        class="ls-form"
        ref="formRef"
        :model="formData"
        :label-col="{ style: { width: '120px' }}"
    >
    <a-form-item label="页面布局" name="layoutId" class="flex-1" :rules="{ required: true, message: '请选择页面布局', trigger: 'change' }">
          <a-select v-model:value="formData.layoutId" class="flex-1" allow-clear placeholder="请选择页面布局">
            <a-select-option v-for="(item, index) in layoutList" :key="index" :value="item.id">{{item.description}}</a-select-option>
          </a-select>
        </a-form-item>
      <a-form-item label="页面类型" name="type"
      :rules="{ required: true, message: '请选择页面类型', trigger: 'change' }">
          <a-select
              v-model:value="formData.type"
              placeholder="请选择页面类型"
              @change="handleType"
          >
            <a-select-option :value="1">CMS文章</a-select-option>
            <a-select-option  :value="2">通知公告</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="推荐文章" name="typeId"  :rules="{ required: true, message: '请选择推荐文章', trigger: 'blur' }">
          <a-input v-model:value="formData.typeText"  placeholder="请选择推荐文章" @click="getLayoutItem"/>
        </a-form-item>
      <a-form-item
            label="图片路径"
            name="image"
        >
            <UploadImg
                       :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
                       name="article"
                       :fileSize="200"
                       v-model:image-url="formData.image">
              <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
            </UploadImg>
        </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="formData.sort"/>
      </a-form-item>
    </a-form>
    <template #footer>
      <span class="dialog-footer">
        <a-button @click="dialogClose">取消</a-button>
        <a-button :loading="subLoading" type="primary" @click="submit">
          确定
        </a-button>
      </span>
    </template>
    <chooseArticle
        v-if="chooseVisible"
        v-model:visible="chooseVisible"
        :type="formData.type"
        @success="setArticle"
    >
    </chooseArticle>
  </a-modal>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'ant-design-vue';
import {getLayoutDetail,layoutAdd,layoutUpdate} from "@/api/content/layoutItem";
import { getLayoutAllList } from '@/api/content/layout';
import {onMounted, reactive, shallowRef,ref,defineAsyncComponent } from "vue";
import { message } from 'ant-design-vue';
import UploadImg from "@/components/Upload/Image.vue";
import {useLockFn} from "@/utils/useLockFn";

const emit = defineEmits(["success", "update:visible"]);
const chooseArticle = defineAsyncComponent(() =>
    import('./layout/index.vue')
)
const formRef = shallowRef<FormInstance>();
const formData = reactive({
  id: "",
  layoutId:undefined,
  type:undefined,
  typeText:"",
  typeId:'',
  image:'',
  sort: 0
});
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  layoutId: {
    type: Number,
    required: true,
    default: 0
  }
});
const chooseVisible= ref(false)
const layoutList = ref([])
const getLayoutItem=()=>{
  if(!formData.type) {
    message.warning("请选择页面类型");
    return
  }
  chooseVisible.value = true
}
const handleType=()=>{
  formData.typeId = ''
  formData.typeText=''
}
const handleSubmit = async () => {
    await formRef.value?.validate();
    props.layoutId ? await layoutUpdate(formData) : await layoutAdd(formData);
    message.success("操作成功");
    emit("update:visible", false);
    emit("success");
};

const dialogClose = () => {
  emit("update:visible", false);
};

const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);

const setFormData = async () => {
  const data = await getLayoutDetail(props.layoutId);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};
const setArticle = (row)=>{
  formData.typeText = row.title
  formData.typeId = row.id
  formRef.value?.validateFields("typeId");
}
const getAllDict = async () => {
  let list = await getLayoutAllList();
  layoutList.value = list ? list : [];
};
onMounted(() => {
  getAllDict()
  if (props.layoutId) {
    setFormData();
  }
});

</script>