platformFront/src/components/knowledgeExtra/AddDevKnow.vue

<template>
  <el-scrollbar style="height: 100%" ref="elscrollbar" id="message-container">
    <div class="NoiseTemplateWrapper TemplateWrapper knowledgeWrapper">
      <crumbs
        :title="'医学术语静态知识维护-' + title"
        class="topBack"
        :param="$route.params"
        linkTo="StaticInfo"
      ></crumbs>

      <div class="info-container">
        <el-form
          :rules="rules1"
          :model="form"
          label-width="160px"
          ref="groups1"
          size="mini"
        >
          <div class="container_top">
            <div v-if="!isEdit" style="margin-right: 40px">
              <el-form-item label="选择标准术语：" prop="selectedTerm">
                <el-select
                  v-model="form.selectedTerm"
                  filterable
                  remote
                  clearable
                  :loading="showDrop"
                  loading-text="加载中..."
                  @change="changeWord"
                  @visible-change="handleVisible"
                  value-key="id"
                  @clear="handleClear"
                  ref="termName"
                  placeholder="搜索"
                  :remote-method="searchTerms"
                >
                  <el-option
                    v-for="(term, idx) in terms"
                    :key="idx"
                    :label="
                      term.name +
                      (term.typeName ? '(' + term.typeName + ')' : '')
                    "
                    :value="term"
                    :title="
                      term.name +
                      (term.typeName ? '(' + term.typeName + ')' : '')
                    "
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>

            <el-form-item
              label="已选择标准术语："
              
              label-width="160px"
              >{{ form.selectedTermName }}</el-form-item
            >
          </div>
        </el-form>
        <p class="line"></p>
        <div class="tabs">
          <div
            class="tabs_pane"
            :style="
              tabActive == 'one' ? { color: '#fff', background: '#00c7da' } : ''
            "
            @click="tabActiveChange('one')"
          >
            静态信息
          </div>
          <div
            class="tabs_pane"
            :style="
              tabActive == 'two' ? { color: '#fff', background: '#00c7da' } : ''
            "
            @click="tabActiveChange('two')"
            v-if="AssesComSHow"
          >
            评估内容
          </div>
        </div>
        <div class="tab_box_left" v-show="tabActive == 'one'">
          <el-form
            :rules="rules"
            :model="form"
            label-width="160px"
            ref="groups"
            size="mini"
          >
            <div
              v-if="
                form.selectedTerm &&
                (form.typeId == 1 ||
                  form.typeId == 3 ||
                  form.typeId == 4 ||
                  form.typeId == 5 ||
                  form.typeId == 6)
              "
            >
              <el-form-item
                :label="titleChange"
                prop="titleChange"
                label-width="160px"
                style="margin-bottom: 20px"
              >
                <el-input v-model="form.titleChange"></el-input>
              </el-form-item>
            </div>
            <div v-if="!upload">
              <DevInfo
                v-for="(f, i) in form.prags"
                :key="(i + 1) * 10000 + showType"
                :data="f"
                :index="i"
                :total="form.prags.length"
                :isEdit="isEdit"
                :isCopy="isCopy"
                ref="subForm"
                @add="addParagraph(i)"
                @del="delParagraph"
                @reOrder="reOrder"
                :showType="showType"
              ></DevInfo>
            </div>

            <div v-if="upload">
              <el-form-item
                label="标题名称搜索："
                prop="fileTitle"
                label-width="160px"
              >
                <el-input v-model="form.fileTitle"></el-input>
              </el-form-item>
            </div>

            <div>
              <el-form-item
                v-if="upload"
                label="上传文件："
                ref="upload"
                prop="fileList"
                label-width="160px"
              >
                <el-upload
                  @mouseenter.native="handleMouseenter"
                  @mouseleave.native="handleMouseleave"
                  class="upload-demo"
                  :action="config.urls.promptServer"
                  name="upfile"
                  :multiple="false"
                  :limit="1"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="handleBeforeUpLoad"
                  :before-remove="beforeRemove"
                  :on-change="handleChange"
                  :on-success="handleSuccess"
                  :show-file-list="showFileList"
                  :file-list="form.fileList"
                >
                  <el-button size="small" type="primary" v-if="showUpLoad"
                    >点击上传</el-button
                  >
                  <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
                <span class="tipInfo" v-show="isShowTip">{{
                  form.fileList[0] && form.fileList[0].name
                }}</span>
                <!-- <el-button size="small" type="primary" >点击上传</el-button> -->
              </el-form-item>
            </div>
            <el-form-item label-width="160px">
              <div class="uploadInfo" v-if="isSuccessUpload === 1">
                文件上传中，请稍等...
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="AssesComSHow" v-show="tabActive == 'two'">
          <AddAssess :childScaleData="scaleData" ref="assessRef" />
        </div>
      </div>

      <div class="btn">
        <el-button type="primary" :disabled="saveDisable" @click="submitForm"
          >确 定</el-button
        >
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
/**
 *
 */
import api from "@api/knowledgeTree.js";
import DevInfo from "./DevInfo";
import config from "@api/config";
import $ from "jquery";
import AddAssess from "./AddAssess";
import { resolve } from "path";

export default {
  name: "AddDevKnow",
  components: {
    DevInfo,
    AddAssess
  },
  data() {
    return {
      AssesComSHow: false,
      toAssesTermId: null,
      scaleData: null,
      isFixedTop: true,
      isEdit: false,
      isCopy: false,
      title: "添加",
      termTypes: [],
      terms: [], //术语列表
      form: {
        conceptId: "", //术语id
        isTip: 0, //是否要覆盖,0不覆盖，1覆盖
        selectedTerm: "", //术语标签
        termType: "",
        typeId: "",
        selectedTermName: "",
        selectedTermType: "",
        // titleChange: '',
        fileList: [],
        name: "",
        prags: [
          {
            //单个段落相关
            title: "",
            content: "",
            isReason: 0,
            orderNo: 0,
            position: [],
            text: ""
          }
        ],
        fileTitle: "",
        titleChange: ""
      },
      rules1: {
        selectedTerm: [
          { required: true, message: "请选择标准术语", trigger: "change" }
        ]
      },
      rules: {
        fileTitle: [
          { required: true, message: "请输入标题名称", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if (value.trim().length > 30) {
                callback(new Error("标题名称不能超过30字"));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ],
        fileList: [
          { required: true, message: "请上传文件", trigger: "change" }
        ],
        titleChange: [
          // {
          //   validator: (rule, value, callback) => {
          //     if (!value.trim()) {
          //       callback(
          //         new Error('请输入' + this.titleChange.replace('：', ''))
          //       );
          //     } else {
          //       callback();
          //     }
          //   },
          //   trigger: 'change'
          // },
          { max: 30, message: "标题最多30字", trigger: "change" }
        ]
      },
      saveDisable: false, //保存按钮禁止点击
      showDrop: false, //下拉框显示文字bug1774
      config: config,
      showUpLoad: true,
      showFileList: false,
      upload: false,
      showConfirm: true,
      isSuccessUpload: 0, //是否上传成功  0: 不在上传  1: 上传过程中  2: 上传成功
      isShowTip: false,
      showType: -1, // 1 诊断  2  药品   3检验套餐 4检验细项  5检查 6检查子   7手术和操作 8量表
      editCount: -1, // 页面会否被编辑 >0被编辑   =0 未编辑
      startCount: -1,
      isSaveSuccess: false, // 是否保存成功
      tabActive: "one"
    };
  },
  watch: {
    showType: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.form.prags = this.form.prags.map((item) => {
            return { ...item, position: [] };
          });
        }
      }
    },
    form: {
      handler(newName, oldName) {
        this.editCount++;
      },
      deep: true,
      immediate: true
    }
  },
  created: function () {
    const { isEdit, data, isCopy } = this.$route.params;
    if (isEdit || isCopy) {
      this.showType = data.type; // 编辑页确认显示类型
      this.isEdit = isEdit;
      this.isCopy = isCopy;
      this.title = isEdit ? "修改" : isCopy ? "复制" : "添加";
      (isEdit || isCopy) && this.changeWord(data);
      if (isCopy) {
        const _this = this;
        setTimeout(() => {
          _this.handleClear();
        }, 300);
      }
      api
        .getBaseRecordById({ id: data.id })
        .then((res) => {
          if (res.data.code == "0") {
            const data = res.data.data;
            this.scaleData = data.scale;
            if (this.form.typeId === 82 || this.form.typeId === 83) {
              // console.log('data',data)
              this.form.fileList =
                data &&
                data.map((it) => {
                  return JSON.parse(it.content);
                });
              this.showFileList = true;
              this.showUpLoad = false;
            } else {
              this.conceptId = data.id;
              this.form.typeId = data.type;
              this.form.name = data.name;
              this.form.titleChange =
                data.type == 1
                  ? data.clinicalPathwayName
                  : data.type == 3 ||
                    data.type == 4 ||
                    data.type == 5 ||
                    data.type == 6
                  ? data.noticeName
                  : "";
              this.form.selectedTermName =
                data.name + (data.typeName ? "(" + data.typeName + ")" : "");
              this.form.selectedTerm =
                data.name + (data.typeName ? "(" + data.typeName + ")" : "");
              this.form.prags =
                data &&
                data.details.map((it) => {
                  return {
                    title: it.title,
                    position: this.mapStringToNum(it.contentType),
                    content: it.content.replace(
                      /{imageUrlPrefix}/g,
                      config.imgHost
                    ),
                    // isReason:it.isReason,
                    text: it.text,
                    disabled: true
                  };
                });
            }
          }
        })
        .catch((error) => {
          if (error.code === "900010001") {
            return false;
          }
          console.log(error);
        });
    }
    setTimeout(() => {
      this.startCount = this.editCount;
    }, 500);
  },
  mounted() {},
  beforeRouteLeave(to, from, next) {
    // if (this.isSuccessUpload === 1) {
    //   this.$confirm('文件正在上传，是否确定返回？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     cancelButtonClass: 'cancel',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       next();
    //     })
    //     .catch(() => {});
    //   //  this.warning('还有未保存的文件，是否确定返回？');
    // } else if (this.isSuccessUpload === 2) {
    //   this.$confirm('还有未保存的文件，是否确定返回？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     cancelButtonClass: 'cancel',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       next();
    //     })
    //     .catch(() => {});
    // } else {
    //   next();
    // }

    if (this.startCount !== this.editCount && !this.isSaveSuccess) {
      this.$alert("还有未保存的内容,确定要退出当前页面吗?", "提示", {
        confirmButtonText: "确定",
        // cancelButtonText: '取消',
        // cancelButtonClass: 'leaveBtn',
        // customClass: 'leaveBox',
        type: "warning"
      })
        .then(() => {
          next();
        })
        .catch(() => {});
    } else {
      next();
    }
  },
  methods: {
    tabActiveChange(type) {
      this.tabActive = type;
      if (type == "two") {
        this.$refs.assessRef.resizeTable();
      }
    },
    handleClear() {
      this.form.selectedTermName = "";
      this.form.selectedTerm = "";
      this.form.titleChange = "";
      // console.log('处理清空的操作');
    },

    handleMouseenter() {
      if (this.form.fileList.length !== 0) {
        this.isShowTip = true;
      }
    },
    handleMouseleave() {
      this.isShowTip = false;
    },
    changeWord(newVal) {
      // console.log(newVal, '选中');
      if (newVal.typeName == "量表") {
        this.AssesComSHow = true;
      } else {
        this.AssesComSHow = false;
        this.tabActive = "one";
      }
      this.toAssesTermId = newVal.id;
      this.showType = newVal.type || -1;
      const name = newVal.name;
      const typeName = newVal.typeName;
      const type = newVal.type;
      this.form.selectedTermName =
        name + (typeName ? "(" + typeName + ")" : "");
      // this.form.selectedTerm = name + (typeName ? '(' + typeName + ')' : '');
      this.form.name = name;
      this.form.fileList = [];
      this.showFileList = false;
      this.form.typeId = type || "";
      this.showUpLoad = true;
      this.titleChange =
        type == 1
          ? "临床路径标题："
          : type == 3 || type == 4 || type == 5 || type == 6
          ? "注意事项标题："
          : "";
      this.form.fileTitle = "";
      if (newVal.typeId === 82 || newVal.typeId === 83) {
        this.upload = true;
        this.form.fileTitle = newVal.title;
      } else {
        this.upload = false;
      }
    },
    handleVisible(flag) {
      if (!flag) {
        this.terms = [];
      }
    },
    reOrder(isUp, i) {
      // isUp: 1 上升    0 下降
      let div = this.$refs["elscrollbar"].$refs["wrap"];
      let temp = {},
        it = {};
      if (isUp === 1) {
        if (i === 0) {
          this.warning("已经是第一个，不能再升啦！");
          return;
        }
        temp = Object.assign(this.form.prags[i - 1]);
        it = Object.assign(this.form.prags[i]);
        this.form.prags.splice(i - 1, 2, it, temp);
        this.$nextTick(() => {
          div.scrollTop = this.$refs.subForm[i - 1].$el.offsetTop - 48;
        });
      } else {
        if (i === this.form.prags.length - 1) {
          this.warning("已经是最后一个，不能再降啦！");
          return;
        }
        temp = Object.assign(this.form.prags[i + 1]);
        it = Object.assign(this.form.prags[i]);
        this.form.prags.splice(i, 2, temp, it);
      }
    },
    addParagraph(i) {
      this.form.prags.splice(i + 1, 0, {
        title: "",
        content: "",
        isReason: 0,
        position: [],
        text: ""
      });
      //添加段落光标自动落到新增的段落中
      setTimeout(() => {
        this.$refs.subForm[i + 1].$el
          .getElementsByClassName("el-input__inner")[0]
          .focus();
      });
    },
    delParagraph(i) {
      if (this.form.prags.length == 1) {
        this.warning("只剩一个段落，不能再删啦！");
        return;
      }
      this.showConfirmDialog("确定要删除该段落？", () => {
        this.form.prags.splice(i, 1);
      });
    },
    back() {
      this.$router.go(-1);
    },
    searchTerms(query) {
      if (!query.trim()) {
        this.form.terms = [];
        return;
      }
      //搜索术语列表
      this.showDrop = true;
      api
        .staticKnowledgeBaseInfo({ inputStr: query.trim(), types: [0] })
        .then((res) => {
          this.showDrop = false;
          if (res.data.code === "0") {
            this.terms = res.data.data;
          } else {
            this.warning("数据获取失败");
          }
        });
    },
    mapStringToNum(str) {
      return str.split(",").map((it) => {
        return +it;
      });
    },

    // 额外的表单检验
    formVal() {
      let positiontemp = this.form.prags.map((item) => {
        return [...item.position];
      });
      let positionArr = positiontemp.reduce(function (a, b) {
        return a.concat(b);
      }); // 所有被选中的值集合
      console.log(positionArr, "positionArr");
      console.log(this.showType, "当前页的显示类型");
      let isVisFlag = positionArr.some((item) => item === 2);
      let isDiagFlag = positionArr.some((item) => item === 3);
      console.log(isVisFlag, "isVisFlag是否显示");
      if (
        (this.showType == 3 ||
          this.showType == 4 ||
          this.showType == 5 ||
          this.showType == 6) &&
        isVisFlag
      ) {
        console.log("进入校验");
        //若医学术语为检验/检查，且内容类型选择了注意事项，此时“注意事项标题”是必填项
        this.$refs.groups.clearValidate();
        this.rules.titleChange.push({
          required: true,
          message: "请输入注意事项标题",
          trigger: "change"
        });
        this.$refs.groups.validateField("titleChange");
        this.$refs.groups.validateField("selectedTerm");
        this.rules.titleChange = this.rules.titleChange.slice(0, 1);

        if (this.form.titleChange.trim() !== "") {
          // console.log('内容不为空');
          return true;
        } else {
          var div = this.$refs["elscrollbar"].$refs["wrap"];
          this.$nextTick(() => {
            div.scrollTop = 0;
          });
          return false;
        }
        // return;
      } else if (isDiagFlag && this.showType == 1) {
        // 若医学术语为诊断，且内容类型选择了临床路径，此时“临床路径标题”是必填项
        this.$refs.groups.clearValidate();
        this.rules.titleChange.push({
          required: true,
          message: "请输入临床路径标题",
          trigger: "change"
        });
        this.$refs.groups.validateField("titleChange");
        this.$refs.groups.validateField("selectedTerm");
        this.rules.titleChange = this.rules.titleChange.slice(0, 1);

        if (this.form.titleChange.trim() !== "") {
          // console.log('内容不为空');
          return true;
        } else {
          var div = this.$refs["elscrollbar"].$refs["wrap"];
          this.$nextTick(() => {
            div.scrollTop = 0;
          });
          return false;
        }
      }
    },

    async submitForm() {
      if (this.isSuccessUpload === 1) {
        this.warning("文件上传中，请稍等");
        return;
      }
      let flagVal = this.formVal(); // 额外的表单校验
      if (flagVal === false) return;
      //验证外层表单
      let goOn = true,
        it = null;
      let outIsVia = true; // 外层验证是否通过

      let fvalidate = new Promise((resolve, reject) => {
        //wanglei 添加promise
        this.$refs.groups.validate((valid) => {
          console.log("valid", valid);
          if (valid) {
            resolve();
          } else {
            console.log("???????!!!");
            reject("f");
            return false;
          }
        });
      });
      let fvalidate1 = new Promise((resolve, reject) => {
        //wanglei 添加promise
        this.$refs.groups1.validate((valid) => {
          console.log("valid1", valid);
          if (valid) {
            resolve();
          } else {
            console.log("???????!!!");
            reject("f");
            return false;
          }
        });
      });

      // end....
      //验证段落表单
      // return;
      let viewHeight = 0; // 定位到表单校验的高度
      let viewHeightArr = []; // 表单校验出错高度的所有数组
      let fvalidate3 = null;
      if (this.form.typeId !== 82 && this.form.typeId !== 83) {
        fvalidate3 = new Promise((resolve, reject) => {
          for (let i = 0; i < this.$refs.subForm.length; i++) {
            it = this.$refs.subForm[i];
            viewHeight += it.$el.offsetHeight;
            it.$refs.form.validate((valid) => {
              if (!valid) {
                reject("f");
                goOn = false;
                viewHeightArr.push(viewHeight);
              } else {
                resolve();
              }
            });
          }
        });
      }
      // 表单验证
      let all = [fvalidate, fvalidate1, fvalidate3];
      if (this.$refs.assessRef) {
        all.push(...this.$refs.assessRef.assessCommit());
      }
      await Promise.all(all)
        .then(() => {})
        .catch((err) => {
          // 跳转到未校验通过的tab页
          if (err == "f") {
            this.tabActive = "one";
          } else if (err == "c") {
            this.tabActive = "two";
          }
          goOn = false;
          outIsVia = false;
        });
      // console.log(viewHeightArr,'viewHeightArr');
      if (!goOn) {
        var div = this.$refs["elscrollbar"].$refs["wrap"];
        if (outIsVia) {
          // 外层校验通过,跳转至下层校验具体位置
          this.$nextTick(() => {
            div.scrollTop = +viewHeightArr[0] - 150;
          });
        } else {
          // 外层校验没通过,页面滚动到顶部
          this.$nextTick(() => {
            div.scrollTop = 0;
          });
        }
        return;
      }
      //通过必填验证，提交保存
      const item = this.form.prags;
      let param = [];
      if (this.form.typeId === 82 || this.form.typeId === 83) {
        if (this.form.fileList.length === 0) {
          this.warning("文件未上传，不存储数据");
          return;
        }
        param.push(
          Object.assign(
            {},
            {
              position: this.form.typeId === 82 ? "8" : "9",
              conceptId: this.form.conceptId,
              title: this.form.fileTitle,
              orderNo: 0,
              content: JSON.stringify(this.form.fileList[0])
            }
          )
        );
      } else {
        let data = this.form.prags,
          tempArr = [],
          paramsAll = {},
          types = this.form.typeId;
        for (let i = 0; i < data.length; i++) {
          let obj = {};
          obj.content = data[i].content;
          obj.text = data[i].text;
          obj.conceptId = data[i].conceptId;
          obj.orderNo = i;
          obj.title = data[i].title;
          obj.contentType = data[i].position.join(",");
          tempArr.push(obj);
        }
        paramsAll.clinicalPathwayName = types == 1 ? this.form.titleChange : "";
        paramsAll.id = this.conceptId;
        paramsAll.name = this.form.name;
        paramsAll.noticeName =
          types == 3 || types == 4 || types == 5 || types == 6
            ? this.form.titleChange
            : "";
        paramsAll.type = this.form.typeId;
        paramsAll.details = tempArr;
        param = paramsAll;
      }
      // this.showSaveDialog(param,'是否'+(this.isEdit?'修改':'保存')+'该静态知识？');

      // 评估内容的数据
      if (this.AssesComSHow) {
        const assessParam = this.$refs.assessRef.formtParams();
        param.scale = assessParam;
        param.scale.conceptId = this.toAssesTermId;
        const userInfo = localStorage.getItem("userLoginDTO");
        param.scale.modifier = userInfo.linkman;
      }

      // console.log("param-------");
      // console.dir(param);
      // return;
      if (!this.isEdit) {
        // 新增页面
        this.saveDisable = true;
        this.sendSaveOrEdit(param);
        return;
      }
      this.showSaveDialog(
        param,
        '<div><p style="color: #333333">确定保存修改内容?</p><p style="color: #D70A25">保存后将覆盖原有数据,且原有数据无法恢复。</p></div>'
      );
    },
    showSaveDialog(param, msg) {
      this.showConfirmDialog(msg, () => {
        this.saveDisable = true; //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
        this.sendSaveOrEdit(param);
      });
    },

    //保存编辑 接口
    sendSaveOrEdit(param) {
      this.isCopy && (param.id = undefined);
      api
        .saveBaseOrUpdateRecord(param)
        .then((res) => {
          if (res.data.code === "0") {
            this.isSuccessUpload = 0; // 修改文件上传状态为0
            this.warning(res.data.msg || "保存成功", "success");
            this.isSaveSuccess = true; // 保存成功,可正常退出
            //返回带搜索条件的首页
            this.$router.push({
              name: "StaticInfo",
              params: Object.assign({}, this.$route.params, {
                currentPage: 1
              })
            });
          } else {
            this.warning(res.data.msg);
          }
          this.saveDisable = false;
        })
        .catch((err) => {
          if (err.code === "900010001") {
            return false;
          }
          this.saveDisable = false;
          this.warning(err);
        });
    },

    // 弹出窗
    showConfirmDialog(msg, resolve) {
      this.$alert(msg, "提示", {
        confirmButtonText: "确定",
        // cancelButtonText: '取消',
        // cancelButtonClass: 'cancel',
        // confirmButtonClass: 'confirmBtn',
        dangerouslyUseHTMLString: true,
        type: "warning"
      })
        .then(() => {
          resolve();
        })
        .catch(() => {});
    },
    warning(msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type || "warning"
      });
    },
    handleChange(file, fileList) {
      // if(fileList&&fileList[0]&&fileList[0].response&&fileList[0].response.code==='0'){
      //   this.showUpLoad = false
      //   this.showFileList = true
      // }else{
      //    this.showUpLoad = true
      //    this.showFileList = false
      // }
      // console.log(fileList,this.form.fileList,'aa')
    },
    handleSuccess(response, file, fileList) {
      if (response.code == "0") {
        this.showFileList = true;
        this.form.fileList = [];
        this.form.fileList.push({
          name: response.data.title,
          url: response.data.url,
          size: response.data.size
        });
        this.showUpLoad = false;
        if (!this.form.fileTitle) {
          this.form.fileTitle = response.data.title;
        }
        this.isSuccessUpload = 2; // 上传成功状态
        this.$refs.upload && this.$refs.upload.clearValidate(); // 清除校验
      } else {
        this.warning(response.msg || "上传失败");
        // this.form.fileList = []
        this.showUpLoad = true;
        this.showFileList = false;
        this.form.fileList = [];
      }
    },
    handleRemove(file, fileList) {
      this.showUpLoad = true;
      this.form.fileList = [];
      this.isSuccessUpload = 0;
    },
    handleBeforeUpLoad(file) {
      // 上传过程中   上传按钮 隐藏
      this.isSuccessUpload = 1; // 上传过程中
      this.showFileList = true; // 新增 进度条  显示
      this.$refs.upload && this.$refs.upload.clearValidate(); // 清除校验

      this.showUpLoad = false;
      if (file.size / 1024 / 1024 >= 500) {
        this.warning("文件上传失败，超出大小限制500MB");
        this.form.fileList = [];
        this.showConfirm = false;
        return false;
      } else {
        this.showConfirm = true;
      }
    },
    handlePreview(file) {},
    beforeRemove(file, fileList) {
      if (this.showConfirm) {
        return this.$alert(`确定移除 ${file.name}？`, "", {
          cancelButtonClass: "cacelBtn"
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../less/common.less";
.cell .el-button.delete:focus {
  color: red !important;
}

.topBack {
  top: 0;
}
.info-container {
  // background: #fff;
  // padding: 20px 0;
  margin: 70px 20px -20px 20px;
  min-width: 960px;
  .el-input__inner {
    width: 200px;
  }
  .el-form-item__label {
    text-align: left;
  }
  .add-prg .el-form-item {
    margin-bottom: 20px;
  }
  // .el-form-item {
  //   margin-bottom: 8px !important;
  // }
}
// .cancel span {
//   color: #22ccc8;
// }
.line {
  // border-top: 1px #dcdfe6 solid;
  background: #dcdfe6;
  height: 12px;
}
.NoiseTemplateWrapper .info-container .el-input__inner {
  width: 250px;
}
// .NoiseTemplateWrapper .el-select .el-input .el-icon-circle-close{
//     display: inherit!important;
// }
.cacelBtn {
  color: #22ccc8 !important;
}
.upload-demo {
  width: 300px;
  /deep/.el-upload-list__item .el-icon-close-tip {
    display: none !important;
  }

  /deep/.el-upload-list__item .el-upload-list__item-name {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/ .focusing {
    // border: 1px solid transparent !important;
    outline: transparent !important;
  }
}
.uploadInfo {
  margin-top: -20px;
  color: #606266;
}
.tipInfo {
  position: absolute;
  // position: relative;
  line-height: 24px;
  top: -56px;
  left: 20px;
  // background-color: transparent;
  // color: #606266;
  padding: 3px 10px;
  border-radius: 4px;
  margin: 100px auto;
  background-color: #4d4d4d;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.tipInfo:before {
  content: "";
  display: block;
  position: absolute;
  // bottom: 9px;
  top: -10px;
  left: 18px;
  border-bottom: 6px solid #4d4d4d;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  // border-right: 6px solid #4D4D4D;
}
.btn {
  text-align: right;
  margin: 0 20px;
  padding: 30px;
  background: #fff;
}
.el-message-box {
  /deep/ .el-icon-warning {
    background-color: transparent !important;
    // display: none;
  }
  /deep/ .el-message-box__message {
    margin: 24px 0px;
  }
  // /deep/ .confirmBtn {
  //   // position: relative;
  //   // right: 240px !important;
  //   // top: 0px;
  //   background-color: #fff !important;
  //   span {
  //     color: #48c5d7 !important;
  //   }
  // }
  /deep/ .cancel {
    background-color: #d7d7d7;
    border-color: transparent !important;
    span {
      color: #fff;
    }
  }
}
/deep/ .el-tabs__header {
  padding: 0 10px !important;
}
.container_top {
  display: flex;
  padding: 20px 30px;
  align-items: center;
}
.tabs {
  display: flex;
  margin: 15px 30px;
  font-size: 14px;
  height: 31px;
  border-bottom: 1px solid #e6e6e6;
  .tabs_pane {
    width: 92px;
    height: 32px;
    border-radius: 6px 6px 0px 0px;
    border: 1px solid #00c7da;
    text-align: center;
    line-height: 32px;
    margin-right: 15px;
    box-sizing: border-box;
    color: #00c7da;
    cursor: pointer;
  }
}
.tab_box_left {
  padding: 0 30px;
}

/deep/ .el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
</style>