drawershow.vue

<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    :destroy-on-close="true"
    size="70%"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div class="form">
        <div class="formleft">
          <Field
            label="标题"
            :span="24"
            prop="title"
            v-model="form.title"
            placeholder="请输入标题"
          />
          <Field :span="24" label="内容"
            ><editor v-model="form.content" :min-height="256"
          /></Field>
        </div>
        <div class="formright">
          <el-row>
            <Field
              label="类型"
              :span="20"
              prop="categoryId"
              v-model="form.categoryId"
              type="radio"
              :enum-data="dict.categoryId"
              placeholder="请输入分类id"
            />

            <template v-if="form.categoryId == 1">
              <Field
                label="所属企业"
                :span="40"
                prop="relatedCompany"
                v-model="form.relatedCompany"
                :multiple="true"
                type="select"
                style="width: 100%"
                :enumData="relatedCompany"
                placeholder="请选择所属企业"
              />
            </template>

            <Field :span="20" label="封面">
              <imageUpload
                v-model="form.titleLogoPath"
                prePath="/file/preview"
                :isList="true"
                :limit="9"
                ref="imgList"
                :slotP="'请上传2MB以内的图片'"
              />
            </Field>

            <Field
              :span="20"
              label="责任编辑"
              prop="editor"
              v-model="form.editor"
              placeholder="请输入责任编辑"
            />

            <Field
              :span="20"
              label="发布部门"
              prop="deptId"
              v-model="form.deptId"
              type="select"
              :enum-data="dict.deptId"
              placeholder="请输入发布部门"
            />

            <Field
              :span="20"
              label="文章来源"
              prop="source"
              v-model="form.source"
              placeholder="请输入文章来源"
            />

            <Field
              label="发布时间"
              prop="publishTime"
              v-model="form.publishTime"
              type="date"
            />

            <Field
              :span="20"
              label="声明"
              prop="statement"
              v-model="form.statement"
              type="textarea"
              placeholder="请输入声明"
            />
          </el-row>
        </div>
      </div>
      <el-form-item class="footerbtns">
        <el-button
          type="primary"
          @click="submitForm"
          icon="el-icon-circle-check-outline"
          >发布</el-button
        >
        <el-button
          @click="
            () => {
              open = false;
            }
          "
          icon="el-icon-circle-close-outline"
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import form from "@/assets/mixins/formdialog";
export default {
  name: "NewsDetail",
  mixins: [form],
  components: {},
  created() {
    this.changePath("news");
    this.$post("/company/list").then((res) => {
      if (res.code == 1) {
        this.companyData = res.data.data;
        let obj = {};
        res.data.data.forEach((v, i) => {
          obj[v.id] = v.companyName;
        });
        this.relatedCompany = obj;
      }
    });
  },
  data() {
    return {
      companyData: [],
      relatedCompany: {},
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "新闻",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: ["top", "viewNums", "categoryId"],
      toDate: ["publishTime"],
      // 表单校验
      rules: {
        categoryId: [
          { required: true, message: "请选择频道类型", trigger: "blur" },
        ],
        relatedCompany: [
          { required: true, message: "请选择所关联企业", trigger: "blur" },
        ],
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { max: 512, message: "最多只能录入512个字符", trigger: "blur" },
        ],
        titleLogoPath: [
          { required: true, message: "请输入标题logo", trigger: "blur" },
        ],
        publishTime: [{ required: true, message: "请选择发布时间" }],
      },
    };
  },

  methods: {
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "news/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改新闻";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "news/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增新闻";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "news/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "新闻详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据前弹框 */
    beforeRender(data) {
      data.entity.deptId && data.entity.deptId != ""
        ? (data.entity.deptId = String(data.entity.deptId))
        : "";
      data.entity.relatedCompany && data.entity.relatedCompany != ""
        ? (data.entity.relatedCompany = data.entity.relatedCompany.split(","))
        : "";
      return data;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },
    // 提交前数据处理
    beforeSubmit(data) {
      let arr = [];
      arr = this.$refs.imgList.imgList.map((v) => {
        return v.response ? v.response.url : v.url.substr(v.url.indexOf("f"));
      });
      data.titleLogoPath = arr.join(",");
      data.relatedCompany instanceof Array
        ? (data.relatedCompany = data.relatedCompany.join(","))
        : "";
      data.categoryId != 1 ? (data.relatedCompany = "") : "";
      return data;
    },
    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        categoryId: null,
        categoryName: "",
        title: "",
        titleLogoPath: "",
        content: "",
        top: 0,
        deptId: "",
        viewNums: 0,
        relatedCompany: "",
        publishTime: null,
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.footerbtns {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-content: center;
}
.form {
  display: flex;
  width: 100%;
  .formleft {
    flex: 1;
    width: 60%;
    height: calc(100vh - 200px);
    overflow: auto;
  }
  .formright {
    width: 40%;
    flex-shrink: 0;
    flex-grow: 0;
  }
}
</style>