hi-ucs/back/src/views/modules/ability/bsabilityservice-add-or-update.vue

<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      :title="disabled ? '能力展示' : '挂接'"
      @close="guanbi"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 挂载和修改-->
      <div key="1" v-if="!disabled">
        <!-- 挂载-->
        <div
          style="
            text-align: center;
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 10px;
          "
        >
          填写字段
        </div>
        <el-checkbox-group
          v-model="checkList"
          @change="showListChagne"
          style="margin-bottom: 20px"
        >
          <el-checkbox-button
            v-for="item in dataForm.showListAll"
            :label="item.name"
            :key="item.id"
            >{{ item.name }}</el-checkbox-button
          >
        </el-checkbox-group>
        <el-form
          v-if="!UpdateState"
          :model="dataForm"
          :rules="rules"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
        >
          <div v-show="checkList.indexOf('必填信息') > -1">
            <div
              style="
                text-align: center;
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 10px;
              "
            >
              必填信息
            </div>
            <el-form-item label="应用名称" prop="name">
              <el-input
                v-model="dataForm.name"
                placeholder="请输入组件名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="应用描述" prop="description">
              <el-input
                v-model="dataForm.description"
                placeholder="请输入组件描述"
              ></el-input>
            </el-form-item>
            <el-form-item label="部门联系人" prop="deptContacts">
              <el-input
                v-model="dataForm.deptContacts"
                placeholder="请输入部门联系人"
              ></el-input>
            </el-form-item>
            <el-form-item label="部门联系人电话" prop="deptPhone">
              <el-input
                v-model="dataForm.deptPhone"
                placeholder="请输入部门联系人电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="共享条件" prop="shareCondition">
              <el-select
                v-model="dataForm.shareCondition"
                placeholder="请选择共享条件"
              >
                <el-option
                  v-for="val in typeOptions"
                  :key="val.value"
                  :label="val.label"
                  :value="val.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="共享类型" prop="shareType"
              ><el-select
                v-model="dataForm.shareType"
                placeholder="请选择共享类型"
              >
                <el-option
                  v-for="val in conditionOptions"
                  :key="val.value"
                  :label="val.label"
                  :value="val.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="共享方式" prop="shareMode">
              <el-input
                v-model="dataForm.shareMode"
                placeholder="请输入共享方式"
              ></el-input>
            </el-form-item>
          </div>
          <div
            v-for="item in dataForm.showList"
            :key="item.id"
            v-show="item.name !== '必填信息'"
          >
            <div
              style="
                text-align: center;
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 10px;
              "
            >
              {{ item.name }}
            </div>
            <el-form-item
              :label="child.name"
              v-for="child in item.children"
              :key="child.id"
              v-show="item.children"
            >
              <el-input
                v-model="child.note1"
                :placeholder="'请输入' + child.name"
                v-if="child.type == 'input'"
              ></el-input>
              <el-input
                v-model="child.note1"
                :placeholder="'请输入' + child.name"
                type="textarea"
                :rows="2"
                v-if="child.type == 'textArea'"
              ></el-input>
              <el-select
                v-else-if="child.type == 'select'"
                v-model="child.note1"
                :placeholder="'请选择' + child.name"
              >
                <el-option
                  v-for="val in child.options"
                  :key="val"
                  :label="val"
                  :value="val"
                >
                </el-option>
              </el-select>
              <upload
                v-else-if="child.type == 'images'"
                :child="child"
                limit="5"
                accept=".jpg,.png"
              ></upload>
              <upload
                v-else-if="child.type == 'image'"
                :child="child"
                limit="1"
                accept=".jpg,.png"
              ></upload>
              <upload
                v-else-if="child.type == 'video'"
                :child="child"
                limit="1"
                accept=".mp4"
              ></upload>
            </el-form-item>
          </div>
        </el-form>
        <!-- 修改-->
        <el-form
          v-else
          :model="dataFormUpdate"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
        >
          <el-form-item label="应用名称">
            <el-input
              v-model="dataFormUpdate.name"
              placeholder="应用名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用描述">
            <el-input
              v-model="dataFormUpdate.description"
              placeholder="应用描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="访问地址">
            <el-input
              v-model="dataFormUpdate.link"
              placeholder="访问地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门联系人">
            <el-input
              v-model="dataFormUpdate.deptContacts"
              placeholder="部门联系人"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门联系人电话">
            <el-input
              v-model="dataFormUpdate.deptPhone"
              placeholder="部门联系人电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="共享类型">
            <el-select v-model="dataFormUpdate.shareType" placeholder="请选择">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- <el-input v-model="dataFormUpdate.shareType" placeholder="共享类型"></el-input> -->
          </el-form-item>
          <el-form-item label="共享条件">
            <el-select
              v-model="dataFormUpdate.shareCondition"
              placeholder="请选择"
            >
              <el-option
                v-for="item in conditionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- <el-input v-model="dataFormUpdate.shareCondition" placeholder="共享条件"></el-input> -->
          </el-form-item>
          <el-form-item label="共享方式">
            <el-input
              v-model="dataFormUpdate.shareMode"
              placeholder="共享方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务接口">
            <el-input
              v-model="dataFormUpdate.apiUrl"
              placeholder="服务接口"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务接口请求方式">
            <el-input
              v-model="dataFormUpdate.apiMethodType"
              placeholder="服务接口请求方式"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-for="item in dataFormUpdate.infoList"
            :key="item.index"
            :label="item.attrType"
          >
            <el-input
              v-model="item.attrValue"
              :placeholder="item.attrType"
              v-if="
                item.attrType != '应用领域' &&
                item.attrType != '应用类型' &&
                item.attrType != '发布端' &&
                item.attrType != '应用状态'
              "
            ></el-input>
            <el-select
              v-else
              v-model="item.attrValue"
              :placeholder="item.attrType"
            >
              <el-option
                :value="item2.dictLabel"
                v-for="item2 in item.children"
                :key="item2.id"
                :label="item2.dictLabel"
              ></el-option>
            </el-select>
            <!-- <el-upload
              v-if="item.attrType == '应用图片'"
              ref="addUpload"
              class="upload-demo"
              :action="fileUploadUrl"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-remove="addUploadRemoveFile"
              :on-preview="showView"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过200M
              </div>
            </el-upload> -->
          </el-form-item>
        </el-form>
      </div>
      <!-- 展示 -->
      <el-form
        key="2"
        class="detial-form"
        v-else
        :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
      >
        <el-form-item label="应用名称" prop="name">
          {{ dataFormShowDetails.name || "--" }}
        </el-form-item>
        <el-form-item label="应用描述">
          {{ dataFormShowDetails.description || "--" }}
        </el-form-item>
        <el-form-item label="访问地址">
          {{ dataFormShowDetails.link || "--" }}
        </el-form-item>
        <el-form-item label="部门联系人">
          {{ dataFormShowDetails.deptContacts || "--" }}
        </el-form-item>
        <el-form-item label="部门联系人电话">
          {{ dataFormShowDetails.deptPhone || "--" }}
        </el-form-item>
        <el-form-item label="共享类型">
          {{ dataFormShowDetails.shareType || "--" }}
        </el-form-item>
        <el-form-item label="共享条件">
          {{ dataFormShowDetails.shareCondition || "--" }}
        </el-form-item>
        <el-form-item label="共享方式">
          {{ dataFormShowDetails.shareMode || "--" }}
        </el-form-item>
        <el-form-item label="服务接口">
          {{ dataFormShowDetails.apiUrl || "--" }}
        </el-form-item>
        <el-form-item label="服务接口请求方式">
          {{ dataFormShowDetails.apiMethodType || "--" }}
        </el-form-item>
        <el-form-item
          v-for="item in dataFormShowDetails.infoList"
          :key="item.index"
          :label="item.attrType"
          :prop="item.attrValue"
        >
          {{ item.attrValue || "--" }}
        </el-form-item>
      </el-form>
      <template slot="footer" v-if="!disabled">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
    <div>
      <el-dialog :visible.sync="dialogVisibleImg">
        <img width="100%" :src="previewImg" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
import dictionaries from "@/utils/dictionaries";
import { mapState } from "vuex";
import { getIconList } from "@/utils";
import Cookies from "js-cookie";
import upload from "./upload.vue";
import bus from "@/views/bus.js";
import qs from "qs";
import Vue from "vue";
export default {
  components: {
    upload,
  },
  data() {
    return {
      checkList: [],
      dialogVisibleImg: false,
      previewImg: "", // 预览图片
      dialogVisible: false,
      fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
      uploadUrl:
        window.SITE_CONFIG.apiURL +
        "/sys/oss/upload?token=" +
        Cookies.get("ucsToken"),
      companyArr: dictionaries.companyArr,
      visible: false,
      sceneArr: dictionaries.sceneArr,
      fieldArr: dictionaries.fieldArr,
      shareFormArr: dictionaries.shareFormArr,
      shareTypeArr: dictionaries.shareTypeArr,
      iconList: [],
      iconListVisible: false,
      menuListVisible: false,
      UpdateState: false,
      dataForm: {
        id: "",
        deptId: "",
        deptContacts: "",
        deptPhone: "",
        dataVolume: "",
        shareCondition: "",
        shareType: "",
        shareMode: "",
        delFlag: 0,
        description: "",
        downloads: 0,
        image: "",
        showList: [],
        infoList: [],
        link: "",
        name: "",
        note1: "",
        note2: "",
        note3: "",
        note4: "",
        note5: "",
        score: "",
        type: "应用资源",
        apiMethodType: "",
        apiUrl: "",
        visits: 0,
      },
      deptId: "",
      fangwendizhi: "",
      mingzi: "",
      dataFormUpdate: {},
      dataFormShowDetails: {},
      infoList2: [],
      infoList3: [],
      typeOptions: [
        { value: "有条件共享", label: "有条件共享" },
        { value: "无条件共享", label: "无条件共享" },
      ],
      conditionOptions: [
        { value: "申请", label: "申请" },
        { value: "免批申请", label: "免批申请" },
      ],

      rules: {
        name: [
          {
            required: true,
            message: "请输入应用名称",
            trigger: "change",
          },
        ],
        description: [
          {
            required: true,
            message: "请输入应用描述",
            trigger: "change",
          },
        ],
        deptContacts: [
          {
            required: true,
            message: "请输入部门联系人",
            trigger: "change",
          },
        ],
        deptPhone: [
          {
            required: true,
            message: "请输入部门联系人电话",
            trigger: "change",
          },
        ],
        shareCondition: [
          {
            required: true,
            message: "请选择共享条件",
            trigger: "change",
          },
        ],
        shareType: [
          {
            required: true,
            message: "请选择请输入共享类型",
            trigger: "change",
          },
        ],
        shareMode: [
          {
            required: true,
            message: "请输入共享方式",
            trigger: "change",
          },
        ],
      },
    };
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState(["catalogueTree"]),
    ...mapState(["departmentSelects"]),
    dataRule() {
      return {
        name: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        version: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        visitUrl: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        shareType: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        shareForm: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        field: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        scene: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        deptId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        rank: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        useInfo: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        remarks: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        isUp: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    // 上传图片
    handleAvatarSuccess(res, file) {
      if (res.code !== 0) {
        return this.$message.error("上传图片失败");
      }
      debugger;
      this.dataForm.infoList.map((item, index) => {
        if (item.attrType == "应用图片") {
          if (!this.dataForm.infoList[index].attrValue) {
            this.dataForm.infoList[index].attrValue = res.data;
          } else {
            this.dataForm.infoList[index].attrValue += ";" + res.data;
          }
          console.log("上传图片", this.dataForm.infoList[index]);
        }
      });
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccessone(res, file) {
      if (res.code !== 0) {
        return this.$message.error("上传图片失败");
      }
      debugger;
      this.dataForm.infoList.map((item, index) => {
        if (item.attrType == "子系统一图片") {
          if (!this.dataForm.infoList[index].attrValue) {
            this.dataForm.infoList[index].attrValue = res.data;
          } else {
            this.dataForm.infoList[index].attrValue = "";
            this.dataForm.infoList[index].attrValue = res.data;
          }
          console.log("上传图片", this.dataForm.infoList[index]);
        }
      });
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccesstwo(res, file) {
      if (res.code !== 0) {
        return this.$message.error("上传图片失败");
      }
      debugger;
      this.dataForm.infoList.map((item, index) => {
        if (item.attrType == "子系统二图片") {
          if (!this.dataForm.infoList[index].attrValue) {
            this.dataForm.infoList[index].attrValue = res.data;
          } else {
            this.dataForm.infoList[index].attrValue = "";
            this.dataForm.infoList[index].attrValue = res.data;
          }
          console.log("上传图片", this.dataForm.infoList[index]);
        }
      });
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccessthree(res, file) {
      if (res.code !== 0) {
        return this.$message.error("上传图片失败");
      }
      debugger;
      this.dataForm.infoList.map((item, index) => {
        if (item.attrType == "子系统三图片") {
          if (!this.dataForm.infoList[index].attrValue) {
            this.dataForm.infoList[index].attrValue = res.data;
          } else {
            this.dataForm.infoList[index].attrValue = "";
            this.dataForm.infoList[index].attrValue = res.data;
          }
          console.log("上传图片", this.dataForm.infoList[index]);
        }
      });
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isImage =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 9999;

      if (!isImage) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isImage && isLt2M;
    },
    addUploadRemoveFile(file, fileList) {
      this.$refs.addUpload.clearFiles();
      this.addDataFrom.imageUrl = "";
    },
    showView(file) {
      this.previewImg = file.url;
      this.dialogVisibleImg = true;
    },
    // 获取当前管理员信息
    getUserInfo() {
      this.$http.get("/sys/user/info").then(({ data: res }) => {
        this.dataForm.deptId = res.data.deptId;
        this.deptId = res.data.deptId;
        console.log("depid", this.dataForm);
      });
    },
    guanbi() {
      this.dataForm = {
        id: "",
        deptId: "",
        deptContacts: "",
        deptPhone: "",
        dataVolume: "",
        shareCondition: "",
        shareType: "",
        shareMode: "",
        delFlag: 0,
        description: "",
        downloads: 0,
        image: "",
        showList: [],
        infoList: [],
        link: "",
        name: "",
        note1: "",
        note2: "",
        note3: "",
        note4: "",
        note5: "",
        score: "",
        type: "应用资源",
        apiMethodType: "",
        apiUrl: "",
        visits: 0,
      };
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片之前
    uploadBeforeUploadHandle(file) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error("只支持jpg、png、gif格式的图片！");
        return false;
      }
    },
    imgUploadSuccess(res, file, fileList) {
      console.log("zzzzzzz", res, file, fileList);

      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
    },
    init() {
      this.getInfoList();
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.dataForm && this.$refs.dataForm.resetFields();
        this.iconList = getIconList();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取属性信息
    getInfoList() {
      const parms = {
        topCategoryName: "应用资源",
      };
      this.infoList2 = [];
      this.$http
        .get("/category/getAllFiledByTopCategory" + "?" + qs.stringify(parms))
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          res.data.map((item, index) => {
            if (
              item.name.search("应用名称") == -1 &&
              item.name.search("地址") == -1 &&
              // item.name.search("描述") == -1 &&
              item.name !== "组件描述" &&
              item.name !== "组件名称" &&
              item.name !== "服务接口" &&
              item.name !== "共享类型" &&
              item.name !== "共享条件" &&
              item.name !== "共享方式" &&
              item.name !== "部门联系人电话" &&
              item.name !== "部门统一社会代码" &&
              item.name !== "部门联系人" &&
              item.name !== "服务商统一社会信用代码" &&
              item.name !== "服务接口请求方式" &&
              item.name !== "部门名称"
            ) {
              const duixiang = {
                attrType: item.name,
                attrValue: "",
                delFlag: 0,
              };
              this.infoList2.push(item);
              if (item.isLinkToDic != "false") {
                const xinxi = {
                  page: 1,
                  limit: 99,
                  dictTypeId: item.linkValue,
                  dictLabel: "",
                  dictValue: "",
                };
                this.$http
                  .get("/sys/dict/data/page" + "?" + qs.stringify(xinxi))
                  .then(({ data: res2 }) => {
                    // this.infoList2[index - 1].children = res2.data.list
                    this.infoList2.map((item3, index3) => {
                      if (item3.name == item.name) {
                        Vue.set(
                          this.infoList2[index3],
                          "children",
                          res2.data.list
                        );
                      }
                    });
                    this.dataFormUpdate.infoList.map((item3, index3) => {
                      if (item3.attrType == item.name) {
                        Vue.set(
                          this.dataFormUpdate.infoList[index3],
                          "children",
                          res2.data.list
                        );
                      }
                    });
                    console.log(
                      "11111111111111111111111111110",
                      this.dataFormUpdate
                    );
                  });
              }
              this.dataForm.infoList.push(duixiang);
            }
          });
          console.log("this.infoList", this.dataFormUpdate);
        })
        .catch(() => {});
      this.$http
        .get("/sys/dict/data/page" + "?" + qs.stringify(parms))
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          console.log("this.infoList", this.dataForm);
        })
        .catch(() => {});
    },
    // 图标, 选中
    iconListCurrentChangeHandle(icon) {
      this.dataForm.imgurl = icon;
      this.iconListVisible = false;
    },
    // 上级菜单树, 选中
    menuListTreeCurrentChangeHandle(data) {
      this.dataForm.pid = data.id;
      this.dataForm.type = data.name;
      this.menuListVisible = false;
    },
    // 上级菜单树, 设置默认值
    deptListTreeSetDefaultHandle() {
      this.dataForm.pid = "0";
      this.dataForm.type = "目录级别";
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/ability/bsabilityai/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          this.getUserInfo();
          this.dataForm.deptId = this.deptId;
          if (!valid) {
            this.$message.error("请检查表单是否填写完整");
            return false;
          }
          console.log("表单数据=======================》", this.dataForm);
          if (!this.UpdateState) {
            this.dataForm.infoList = [];
            this.dataForm.showListAll.forEach((val) => {
              if (val.name !== "必填信息") {
                if (val.name === "服务接口信息") {
                  val.children.forEach((item) => {
                    if (item.name === "服务接口") {
                      this.dataForm.apiUrl = item.note1;
                    }
                    if (item.name === "接口请求方式") {
                      this.dataForm.apiMethodType = item.note1;
                    }
                    if (item.name === "访问地址") {
                      this.dataForm.link = item.note1;
                    }
                  });
                } else {
                  val.children.forEach((item) => {
                    this.dataForm.infoList.push({
                      attrType: item.name,
                      attrValue: item.note1,
                      delFlag: 0,
                    });
                  });
                }
              }
            });
            this.$http
              .post("/resource/insert?source= b", this.dataForm)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                }
                this.$message({
                  message: this.$t("prompt.success"),
                  type: "success",
                  duration: 500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                  },
                });
              })
              .catch(() => {});
          } else {
            this.$http
              .put("/resource/update", this.dataFormUpdate)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                }
                this.$message({
                  message: this.$t("prompt.success"),
                  type: "success",
                  duration: 500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                  },
                });
              })
              .catch(() => {});
          }
        });
      },
      1000,
      { leading: true, trailing: false }
    ),
    showListChagne() {
      this.dataForm.showList = this.dataForm.showListAll.filter(
        (item) => this.checkList.indexOf(item.name) > -1
      );
      console.log(
        "属性变更===================>",
        this.checkList,
        this.dataForm.showList,
        this.dataForm.showListAll
      );
    },
  },
  mounted() {
    this.getUserInfo();
  },
  beforeDestroy() {
    console.log("销毁~~~~~~~~~~~~~~~~~~~~");
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 580px;
  overflow: auto;
}
.icon-input ::v-deep .el-input__inner {
  cursor: pointer;
}
.detial-form ::v-deep {
  .el-form-item {
    margin-bottom: 0px;
    line-height: 32px;
  }
  .el-form-item__label {
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 32px;
  }
}
::v-deep .el-checkbox-button__inner {
  width: 130px;
  margin: 0 10px 5px;
  border-left: unset !important;
  border-radius: unset !important;
  border: 1px solid #dcdfe6 !important;
}
</style>

<style lang="scss">
.mod-sys__menu {
  .menu-list,
  .icon-list {
    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }
  &-icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &-icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &-icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
}
.previewImg {
  position: fixed;
  z-index: 9999;
}
</style>