PlansMgEdit.vue

<template>
  <div class="wrapper editwrap w100">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div v-if="title != '详情'">
        <el-row :gutter="20">
          <el-col :span="12" class="flcolum">
            <div>
              <div class="yatit">预案基本信息</div>
              <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
                <el-form-item label="预案标题" prop="planTitle">
                  <el-input v-model="editForm.planTitle"></el-input>
                </el-form-item>
                <el-form-item label="预案分类" prop="planType">
                  <el-input v-model="editForm.planType"></el-input>
                </el-form-item>
                <el-form-item label="预案等级" prop="planLevel">
                  <el-radio-group v-model="editForm.planLevel">
                    <el-radio label="Ⅰ">Ⅰ级</el-radio>
                    <el-radio label="Ⅱ">Ⅱ级</el-radio>
                    <el-radio label="Ⅲ">Ⅲ级</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="是否上报" prop="isReported">
                  <el-radio-group v-model="editForm.isReported">
                    <el-radio label="0">上报</el-radio>
                    <el-radio label="1">未上报</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="预案源文件">
                  <el-upload
                    ref="uploaderB"
                    class="uploader"
                    :limit="1"
                    :action="actionUrl"
                    :on-success="(a,b,c) => onSuccess(a,b,c,'sourceFile')"
                    :on-error="onError"
                    :on-remove="handleRemove"
                    :before-remove="(a,b,c) => beforeRemove(a,b,c,'sourceFile')"
                    :on-exceed="onExceed"
                    :multiple="false"
                    list-type="picture"
                    :file-list="fileList"
                  >
                    <i class="el-icon-plus"></i>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                  <!-- <div v-if="fileList.length > 0">
                  <a v-for="(i,ind) in fileList" :key="ind" :href="i.url" target="_blank">{{i.name}}</a>&nbsp;&nbsp;&nbsp;<i class="btn el-icon-delete" @click="deleteList"></i>
                  </div>-->
                </el-form-item>
                <el-form-item label="审核意见" v-if="editForm.remarks != '' && editForm.remarks != null">
                  <font>{{editForm.remarks}}</font>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12" class="flcolum">
            <div>
              <div class="yatit">预案内容</div>
              <textarea id="editorA" v-model="editForm.planContents" height="100%"></textarea>
            </div>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="confirmFun('editForm')">提交预案</el-button>
          <el-button @click="$emit('dialogFun')" size="small">取消编辑</el-button>
        </span>
      </div>
      <div v-else>
        <el-row :gutter="20">
          <el-col :span="12" class="flcolum">
            <div>
              <div class="yatit">预案基本信息</div>
              <el-form ref="editForm" :model="editForm" label-width="100px">
                <el-form-item label="所属公司:">
                  <font>{{editForm.enterpriseName}}</font>
                </el-form-item>
                <el-form-item label="预案标题:">
                  <font>{{editForm.planTitle}}</font>
                </el-form-item>
                <el-form-item label="预案分类:">
                  <font>{{editForm.planType}}</font>
                </el-form-item>
                <el-form-item label="预案等级:">
                  <font>{{editForm.planLevel + '级'}}</font>
                </el-form-item>
                <el-form-item label="是否上报:">
                  <font>{{editForm.isReported == 0 ? '已上报' : '未上报'}}</font>
                </el-form-item>
                <el-form-item label="预案源文件:">
                  <span
                    class="dbtn sd qiCr"
                    @click="checkFile(editForm.sourceFile)"
                    v-if="editForm.sourceFile != '' && editForm.fileOriginalName != ''"
                  >
                    <i class="el-icon el-icon-view"></i>
                    {{editForm.fileOriginalName}}
                  </span>
                </el-form-item>
                <el-form-item label="审核状态:" v-if="editForm.isReported == 0">
                  <!--<font>{{editForm.checkStatus == 0 ? '已上报' : '未上报'}}</font>-->
                  <span v-if="editForm.checkStatus == 0">待审核</span>
                  <span v-if="editForm.checkStatus == 1">审核通过</span>
                  <span v-if="editForm.checkStatus == 2">审核未通过</span>
                </el-form-item>
                <el-form-item label="审核意见:" v-if="editForm.remarks != '' && editForm.remarks != null">
                  <font>{{editForm.remarks}}</font>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12" class="flcolum">
            <div>
              <div class="yatit">预案内容</div>
              <div v-html="editForm.planContents" style="height:420px; border:solid 1px #ccc; overflow: auto"></div>
              <font v-if="editForm.planContents == ''">暂无内容~</font>
            </div>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer fr">
          <el-button @click="$emit('dialogFun')" size="small">取消查看</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
import ice from "@/utils/iceEditor-min.js";
let uploadfile = require("@/assets/uploadfile.png");
@Component({
  components: { City },
})
export default class PlansMgEdit extends Vue {
  //上传
  @Provide() actionUrl: any = "";
  @Provide() sourceFile: any = [];
  @Provide() fileList: any = [];
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;
  @Prop(String) title!: String;
  @Prop(Object) editForm!:{
    id: String;
    enterpriseId: String;
    sourceFile: String;
    planContents: String;
    planType: String;
    planLevel: String;
    planTitle: String;
    fileOriginalName: String;
    checkStatus: String;
    remarks: String;
  };
  @Provide() enterpriseId: String = "";
  @Provide() editorA: any;
  @Provide() qyvisble: boolean = true;

  @Provide() rules: any = {
    planLevel: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    planTitle: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    planType: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
  };
  @Watch("sourceFile") change(val: any) {
    if (val.length > 0) {
      this.editForm.sourceFile = val[0].response.data.viewPath;
      this.editForm.fileOriginalName = val[0].response.data.originalName;

      this.fileList = [];
      this.fileList.push({
        name: this.editForm.fileOriginalName,
        url: uploadfile,
      });
    } else {
      this.editForm.sourceFile = "";
      this.editForm.fileOriginalName = "";
    }
  }
  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this;
    that.editForm.planContents = that.editorA.getHTML();
    that.editForm.enterpriseId = that.enterpriseId;
    that.editForm.checkStatus = "";
    that.editForm.remarks = "";
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (that.editorA.getText() == false && (that.editForm.sourceFile == "" || that.editForm.sourceFile == undefined)) {
        that.$message.error("没有预案内容！");
        return;
      }
      if (valid) {
        METHOD.axiosPost(
          that,
          `/planInfo/addOrEditPlanInfo`,
          that.editForm,
          function (res: any) {
            if (res.code == 0) {
              (that as any).$message({
                message: "操作成功！",
                type: "success",
              });
              (that as any).$emit("dialogFun");
              that.$emit("refreshTableData"); //刷新表格
            }
          }
        );
      } else {
        return false;
      }
    });
  }
  /*
  上传
  */
  onSuccess(res: any, file: any, fileList: any, key: string) {
    this.$data[key] = fileList;
  }
  onError(err: any, file: any, fileList: any) {
    this.$message.error("上传失败!");
  }
  handleRemove(file: any, fileList: any, key: string) {
    this.$data[key] = fileList;
  }
  onExceed(file: any, fileList: any) {
    this.$message.warning("只允许上传一个文件，如需更改请先删除！");
  }
  beforeRemove(file: any, fileList: any) {
    let that = this,
      param;
    param = file.response
      ? file.response.data.savePath.replace(/\\/g, "%")
      : file.url.replace(/\\/g, "%").slice(9);
    METHOD.axiosGet(this, `/file/deleteFile?savePath=${param}`, function (
      res: any
    ) {
      if (res.code == 0) that.$message.success("删除成功");
      else return false;
    });
  }
  //创建编辑器
  creatEditor() {
    this.editorA = new ice.editor("editorA");
    this.editorA.menu = [
      "fontSize",
      "foreColor",
      "bold",
      "italic",
      "underline",
      "strikeThrough",
      "line",
      "justifyLeft",
      "justifyCenter",
      "justifyRight",
      "line",
      "table",
      "insertImage",
      "insertOrderedList",
      "insertUnorderedList",
      "indent",
    ];
    this.editorA.height = "413px";
    this.editorA.create();
  }
  deleteList() {
    this.fileList = [];
    this.editForm.sourceFile = "";
  }
  checkFile(url: any) {
    window.open(METHOD.URL + url, "_blank");
  }
  created() {
    let that = this;
    that.enterpriseId = METHOD.enterpriseId;
    // if (that.enterpriseId) {
    //   that.qyvisble = true;
    if(this.title != '详情') {
      that.$nextTick(() => {
        that.creatEditor();
      })
      // } else {
      //   that.qyvisble = false;
      // }
      // if (that.editForm.id && that.enterpriseId) {
      that.$nextTick(() => {
        //编辑
        if (that.editForm.planContents) {
          that.editorA.setValue(that.editForm.planContents);
        }
        if (that.editForm.fileOriginalName) {
          that.fileList.push({
            name: that.editForm.fileOriginalName,
            url: uploadfile,
          });
        }
      });
    }
    // }
    that.actionUrl = METHOD.URL + "/file/uploadFile";
  }
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.w100 .el-dialog {
  width: 80%;
  .flcolum {
    > div {
      border-radius: 3px;
    }
  }
  .yatit {
    background: #4273bd;
    color: #ffffff;
    line-height: 2;
    height: 2em;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 2px;
  }
  .el-transfer-panel {
    width: calc((100% - 116px) / 2);
  }
  .el-transfer__buttons {
    width: 56px;
  }
  .el-transfer__button {
    margin-left: 0;
    display: block;
  }
}
</style>