njzf-manage/src/views/newsManage/components/addNews.vue

<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="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 dict.type.publish_type"
                :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="12">
          <el-form-item label="封面" prop="thumbUrl">
            <image-upload :limit="1" v-model="formData.thumbUrl" />
          </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="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: ["publish_type"],
  props: {
    infoData: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        title: "",
        author: "",
        thumbUrl: "",
        showCoverPic: "1",
        url: "",
        publishTime: "",
        digest: "",
        status: "",
        publishType: "",
      },
      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>