wms-elevue/src/views/content/layoutItem/edit.vue

<template>
  <el-drawer
      v-model="props.visible"
      :title="props.layoutId?'编辑':'新增'"
      :size="800"
      :close-on-click-modal="false"
      :before-close="dialogClose"
  >
    <el-form
        class="ls-form"
        ref="formRef"
        :model="formData"
        label-width="120px"
    >
    <el-form-item label="页面布局" prop="layoutId" class="flex-1" :rules="{ required: true, message: '请选择页面布局', trigger: 'change' }">
          <el-select v-model="formData.layoutId" class="flex-1" clearable placeholder="请选择页面布局">
            <el-option v-for="(item, index) in layoutList" :key="index" :label="item.description" :value="item.id" />
          </el-select>
        </el-form-item>
      <el-form-item label="页面类型" prop="type"
      :rules="{ required: true, message: '请选择页面类型', trigger: 'change' }">
          <el-select
              v-model="formData.type"
              placeholder="请选择页面类型"
          >
            <el-option label="CMS文章" :value="1"></el-option>
            <el-option label="通知公告" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推荐文章" prop="typeId"  :rules="{ required: true, message: '请选择推荐文章', trigger: 'blur' }">
          <el-input v-model="formData.typeText"  placeholder="请选择推荐文章" @click="getArticle"/>
        </el-form-item>
      <el-form-item
            label="图片路径"
            prop="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>
        </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="formData.sort"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button :loading="subLoading" type="primary" @click="submit">
          确定
        </el-button>
      </span>
    </template>
    <chooseArticle
        v-if="chooseVisible"
        v-model:visible="chooseVisible"
        :type="formData.type"
        @success="setArticle"
    >
    </chooseArticle>
  </el-drawer>
</template>
<script lang="ts" setup>
import type {FormInstance} from "element-plus";
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 "@/utils/auth";
import UploadImg from "@/components/Upload/Image.vue";
import {useLockFn} from "@/utils/useLockFn";

const emit = defineEmits(["success", "update:visible"]);
const chooseArticle = defineAsyncComponent(() =>
    import('./article/index.vue')
)
const formRef = shallowRef<FormInstance>();
const formData = reactive({
  id: "",
  layoutId:'',
  type:'',
  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 handleSubmit = async () => {
    await formRef.value?.validate();
    props.layoutId ? await layoutUpdate(formData) : await layoutAdd(formData);
    message("操作成功");
    emit("update:visible", false);
    emit("success");
};

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

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

const getArticle=()=>{
  if(!formData.type) {
    message("请选择页面类型",'warning');
    return
  }
  chooseVisible.value = true
}
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?.validateField("typeId");
}
const getAllDict = async () => {
  let list = await getLayoutAllList();
  layoutList.value = list ? list : [];
};
onMounted(() => {
  getAllDict()
  if (props.layoutId) {
    setFormData();
  }
});

</script>