Xf-association/src/views/System/contentSet/article/operation.vue

<template>
  <div id="">
    <el-dialog
      :close-on-click-modal="false"
      title="路由配置"
      :visible.sync="dialogVisible"
      width="1000px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属菜单" prop="MenuId">
              <el-cascader
                v-model="ruleForm.MenuId"
                placeholder="选择目录"
                :options="$parent.routerTableData"
                :props="{
                  value: 'MenuId',
                  label: 'Name',
                  children: 'ChildList',
                  emitPath: false,
                }"
              ></el-cascader
            ></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标题" prop="Title">
              <el-input v-model.trim="ruleForm.Title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图片上传" prop="ImageUrl">
              <el-image
                v-if="ruleForm.ImageUrl"
                style="width: 112px; height: 70px"
                :src="$methods.splitImgHost(ruleForm.ImageUrl)"
                :preview-src-list="[$methods.splitImgHost(ruleForm.ImageUrl)]"
              >
              </el-image>
              <label for="uploads"><span class="btn">上传图片</span></label>
              <input
                type="file"
                id="uploads"
                style="display: none"
                @change="uploadImg"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否置顶" prop="IsTop">
              <el-radio-group v-model="ruleForm.IsTop">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group></el-form-item
            >
          </el-col>

          <el-col :span="12">
            <el-form-item label="会员可见" prop="IsMemberRead">
              <el-radio-group v-model="ruleForm.IsMemberRead">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group></el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="Status">
              <el-radio-group v-model="ruleForm.Status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group></el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="CreateTime">
              <el-date-picker
                v-model="ruleForm.CreateTime"
                type="datetime"
                placeholder="选择创建日期时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker
            ></el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="文章内容" prop="NewContent">
              <editor
                v-model="ruleForm.NewContent"
                :min-height="300"
                :max-height="500"
            /></el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit('ruleForm')"
          :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Editor from "@/components/Editor";
export default {
  components: { Editor },
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        Title: "",
        IsTop: false,
        IsMemberRead: false,
        Status: 1,
        MenuId: "",
        ImageUrl: "",
        CreateTime: "",
      },
      rules: {
        Title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        ImageUrl: [
          { required: true, message: "请上传图片", trigger: "change" },
        ],
        MenuId: [
          {
            required: true,
            message: "请选择所属菜单",
            trigger: ["blur", "change"],
          },
        ],
      },
      loading: false,
    };
  },
  methods: {
    showInit(e, id) {
      if (e) {
        this.ruleForm = e;
      } else {
        this.ruleForm = {
          Title: "",
          IsTop: false,
          IsMemberRead: false,
          Status: 1,
          ImageUrl: "",
          MenuId: "",
          CreateTime: "",
        };
      }
      this.dialogVisible = true;
    },
    uploadImg(e) {
      var self = this;
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 0.6 * 1024 * 1024) {
        self.$message.error("图片不得大于600kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
        self.$message.error("上传格式需为：.jpg/.png/.jpeg");
        e.target.value = "";
        return;
      }
      let formDatas = new FormData();
      formDatas.append("file", file);
      this.$api
        .XfSysBussinessUploadFile(formDatas)
        .then((res) => {
          this.$set(this.ruleForm, "ImageUrl", res.Data);
          this.$refs["ruleForm"].validateField("ImageUrl");
        })
        .finally(() => {
          e.target.value = "";
        });
    },
    close() {
      this.loading = false;
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    },
    submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$api.XfSysBussinessSaveNews(this.ruleForm).then((res) => {
            this.close();
            this.$parent.search();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>