|
|
@@ -0,0 +1,234 @@
|
|
|
+<template>
|
|
|
+ <div v-loading="loading">
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :rules="formRules"
|
|
|
+ :model="formData"
|
|
|
+ class="form"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.title"
|
|
|
+ placeholder="请输入标题"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="作者" prop="author">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.author"
|
|
|
+ placeholder="请输入作者"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="封面" prop="thumbUrl">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.thumbUrl"
|
|
|
+ placeholder="请输入封面图片地址"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否显示封面" prop="showCoverPic">
|
|
|
+ <!-- @change="handleShow" -->
|
|
|
+ <el-switch
|
|
|
+ v-model="formData.showCoverPic"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="跳转地址" prop="url">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.url"
|
|
|
+ placeholder="请输入跳转地址"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="发布时间" prop="publishTime">
|
|
|
+ <!-- value-format="yyyy-MM-dd HH:mm:ss" -->
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="formData.publishTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择发布时间"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="类别" prop="publishType">
|
|
|
+ <el-select
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="formData.publishType"
|
|
|
+ placeholder="请选择类别"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in typeOptions"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="formData.status"
|
|
|
+ placeholder="请选择状态"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in statusOptions"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="摘要" prop="digest">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.digest"
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="请输入摘要"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" style="text-align: right">
|
|
|
+ <el-button type="primary" @click="handleConfirm">确 定</el-button>
|
|
|
+ <el-button @click="handleCancel">取 消</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ dicts: [],
|
|
|
+ props: {
|
|
|
+ infoData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ loading: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formData: {
|
|
|
+ title: "",
|
|
|
+ author: "",
|
|
|
+ thumbUrl: "",
|
|
|
+ showCoverPic: "1",
|
|
|
+ url: "",
|
|
|
+ publishTime: "",
|
|
|
+ digest: "",
|
|
|
+ status: "",
|
|
|
+ publishType: "",
|
|
|
+ },
|
|
|
+ typeOptions: [
|
|
|
+ { value: "1", label: "公司喜讯" },
|
|
|
+ { value: "2", label: "公司动态" },
|
|
|
+ { value: "3", label: "行业动态" },
|
|
|
+ ],
|
|
|
+ statusOptions: [
|
|
|
+ { value: "0", label: "有效" },
|
|
|
+ { value: "1", label: "无效" },
|
|
|
+ ],
|
|
|
+ formRules: {
|
|
|
+ title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
|
|
+ author: [{ required: true, message: "请输入作者", trigger: "blur" }],
|
|
|
+ url: [
|
|
|
+ { required: true, message: "请输入文章跳转地址", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ publishTime: [
|
|
|
+ { required: true, message: "请选择发布时间", trigger: "change" },
|
|
|
+ ],
|
|
|
+ type: [{ required: true, message: "请选择类别", trigger: "change" }],
|
|
|
+ publishType: [
|
|
|
+ { required: true, message: "请选择类别", trigger: "change" },
|
|
|
+ ],
|
|
|
+ status: [{ required: true, message: "请选择状态", trigger: "change" }],
|
|
|
+ digest: [{ required: true, message: "请输入摘要", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ infoData: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.formData = {
|
|
|
+ officialAccountId: newVal.officialAccountId || "",
|
|
|
+ title: newVal.title || "",
|
|
|
+ author: newVal.author || "",
|
|
|
+ thumbUrl: newVal.thumbUrl || "",
|
|
|
+ showCoverPic: newVal.showCoverPic || "1",
|
|
|
+ url: newVal.url || "",
|
|
|
+ publishTime: newVal.publishTime || "",
|
|
|
+ digest: newVal.digest || "",
|
|
|
+ status: newVal.status || "",
|
|
|
+ publishType: newVal.publishType || "",
|
|
|
+ };
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.form && this.$refs.form.clearValidate();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ // 是否展示封面
|
|
|
+ // handleShow(val) {
|
|
|
+ // this.formData.showCoverPic = val;
|
|
|
+ // },
|
|
|
+ handleConfirm() {
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$emit("save", this.formData);
|
|
|
+ } else {
|
|
|
+ this.$message.warning("表单校验不通过，请检查");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.formData = {
|
|
|
+ title: "",
|
|
|
+ author: "",
|
|
|
+ thumbUrl: "",
|
|
|
+ showCoverPic: "1",
|
|
|
+ url: "",
|
|
|
+ publishTime: "",
|
|
|
+ digest: "",
|
|
|
+ status: "",
|
|
|
+ publishType: "",
|
|
|
+ };
|
|
|
+ this.$refs.form.clearValidate();
|
|
|
+ this.$emit("cancel");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
mnisting