orico-officialWebsite-ts-admin/src/views/articleManagement/list/edit.vue

<template>
    <!-- style="margin-bottom: 16px" -->

    <div class="table-box">
        <div style="padding-bottom: 16px">
            <el-button @click="handleReset"> 重置 </el-button>
            <el-button type="primary" @click="handleConfirmClick"> 提交 </el-button>
        </div>
        <div class="card table-main">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="基本信息" name="basicInfo">
                    <rulesForm
                        :ruleForm="dataStore.editRuleForm"
                        :formData="dataStore.editFormData"
                        :rules="dataStore.rules"
                        ref="formRef"
                        @handleSelectChangeEmits="handleSelectChangeEmits"
                    />
                </el-tab-pane>

                <el-tab-pane label="详细内容" name="third">
                    <div style="width: 1280px; margin: 0 auto">
                        <WangEditor v-model:value="dataStore.editRuleForm.content" />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts" name="articleEditIndex">
import rulesForm from "@/components/rulesForm/index.vue";
import {
    getArticleClassDataApi,
    getArticleListAddSaveApi,
    getArticleListDetailsApi,
    getArticleListUpApi
} from "@/api/modules/articleList";
// /handleSubmit,
import { EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
import { useSearchInfoArray } from "@/hooks/useSearch";
import { ref, reactive } from "vue";
import WangEditor from "@/components/WangEditor/index.vue";
// import rulesForm from "@/components/rulesForm/index.vue";

import { cloneDeep } from "lodash-es";
import { useMsg } from "@/hooks/useMsg";
const formRef = ref<any>(null);
const activeName = ref("basicInfo");
const $route = useRoute();

//数据集合
const dataStore = reactive<any>({
    rules: cloneDeep(RULES), //抽屉表单验证
    editRuleForm: cloneDeep(EDIT_RULE_FORM),
    editFormData: cloneDeep(EDIT_FORM_DATA) //抽屉表单配置项
});

//文章分类
const getArticleClassData = async () => {
    const result = await getArticleClassDataApi({ is_show: 1 });
    if (result?.code === 0) {
        const { data } = result;
        dataStore.editFormData[1].options = useSearchInfoArray(data);
        //如果有category_id就代表是从文章分类跳转过来的
        if ($route.query.category_id) {
            dataStore.editRuleForm.category_id = Number($route.query.category_id);
        }
    }
};
getArticleClassData();

//文章详情
const getArticleListDetails = async () => {
    let id = $route.query.id;
    if (!id) {
        return;
    }
    const result = await getArticleListDetailsApi(id);
    if (result?.code === 0) {
        const { data } = result;
        dataStore.editRuleForm = data;
        console.log(data);

        let is = dataStore.editFormData[1].options.some((item: any) => {
            console.log(item.id);
            console.log(dataStore.editRuleForm.category_id);
            return item.value == dataStore.editRuleForm.category_id;
        });
        dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
    }
};
const handleSelectChangeEmits = (value: any) => {
    console.log(value, "=======value========");
    if (value?.prop === "category_id1") {
        dataStore.editRuleForm.category_id = value.id;
    }
};
const convertDateFormat = (dateString: any) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
//新增
const getArticleListAddSave = async () => {
    if (dataStore.editRuleForm.release_time) {
        dataStore.editRuleForm.release_time = convertDateFormat(dataStore.editRuleForm.release_time);
    } else {
        dataStore.editRuleForm.release_time = null;
    }
    const result = await getArticleListAddSaveApi(dataStore.editRuleForm);
    if (result.code === 0) {
        const { msg } = result;
        useMsg("success", msg);
    }
};
//更新
const getArticleListUp = async () => {
    if (dataStore.editRuleForm.release_time) {
        dataStore.editRuleForm.release_time = convertDateFormat(dataStore.editRuleForm.release_time);
    } else {
        dataStore.editRuleForm.release_time = null;
    }
    const result = await getArticleListUpApi({ id: $route.query.id, ...dataStore.editRuleForm });

    if (result?.code === 0) {
        useMsg("success", result?.msg);
    }
};

getArticleListDetails();

//提交
const handleConfirmClick = () => {
    if (!formRef.value!.ruleFormRef) return;
    formRef!.value!.ruleFormRef!.validate((valid: any) => {
        if (valid) {
            console.log("submit!");
            $route.query.type === "add" ? getArticleListAddSave() : getArticleListUp();
        } else {
            console.log("error submit!");
            return false;
        }
    });
};
//重置
const handleReset = () => {
    if ($route.query.type === "add") {
        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
    } else {
        getArticleListDetails();
    }
};
</script>

<style scoped></style>