irc_web/src/views/dictionary/template/browser/form.vue

<template>
  <base-model :config="config">
    <div slot="dialog-body">
      <el-form
        ref="browserForm"
        :model="form"
        label-width="140px"
        size="small"
        :rules="rules"
      >
        <div class="base-dialog-body">
          <el-form-item
            :label="$t('dictionary:browser:form:title')"
            prop="Title"
          >
            <el-input v-model="form.Title" />
          </el-form-item>
          <el-form-item
            :label="$t('dictionary:browser:form:exploreType')"
            prop="ExploreType"
          >
            <el-input v-model="form.ExploreType" />
          </el-form-item>
          <el-form-item
            :label="$t('dictionary:browser:form:version')"
            prop="Version"
          >
            <el-input v-model="form.Version" type="textarea" rows="5" />
          </el-form-item>
          <el-form-item
            :label="$t('dictionary:browser:form:downloadUrl')"
            prop="DownloadUrl"
          >
            <el-input v-model="form.DownloadUrl" />
          </el-form-item>
          <el-form-item :label="$t('dictionary:browser:form:addFile')">
            <el-upload
              class="upload-demo"
              action
              :before-upload="beforeUpload"
              :http-request="handleUploadFile"
              :on-preview="handlePreview"
              :on-remove="handleRemoveFile"
              :show-file-list="true"
              :limit="1"
              :file-list="fileList"
            >
              <el-button
                size="small"
                type="primary"
                :disabled="fileList.length > 0"
                >{{ $t("common:button:upload") }}</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item :label="$t('dictionary:browser:form:isDeleted')">
            <el-switch
              v-model="form.IsDeleted"
              :active-value="false"
              :inactive-value="true"
            >
            </el-switch>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div slot="dialog-footer">
      <el-button size="small" @click="canel">
        {{ $t("dictionary:browser:button:canel") }}
      </el-button>
      <el-button size="small" type="primary" :loading="loading" @click="save">
        {{ $t("dictionary:browser:button:save") }}
      </el-button>
    </div>
  </base-model>
</template>
<script>
import baseModel from "@/components/BaseModel";
import { addOrUpdateExploreRecommend } from "@/api/dictionary";
export default {
  props: {
    config: {
      required: true,
      default: () => {
        return {};
      },
    },
    data: {
      required: true,
      default: () => {
        return {};
      },
    },
  },
  components: {
    "base-model": baseModel,
  },
  data() {
    return {
      form: {
        Version: null,
        Title: null,
        IsDeleted: true,
        ExploreType: null,
        DownloadUrl: null,
        Path: null,
        FileName: null,
      },
      rules: {
        Title: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: ["blur", "change"],
          },
        ],
        ExploreType: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: ["blur", "change"],
          },
        ],
        Version: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: ["blur", "change"],
          },
        ],
        DownloadUrl: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: ["blur", "change"],
          },
        ],
      },
      fileList: [],
      loading: false,
    };
  },
  created() {
    if (this.config.status === "edit") {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = this.data[key];
      });
      if (this.form.FileName) {
        this.fileList[0] = {
          name: this.form.FileName,
          path: this.form.Path,
          fullPath: this.form.Path,
        };
      }
    }
  },
  methods: {
    async save() {
      try {
        let validate = await this.$refs.browserForm.validate();
        if (!validate) return false;
        this.loading = true;
        if (this.config.status === "edit") {
          this.form.Id = this.data.Id;
        }
        let res = await addOrUpdateExploreRecommend(this.form);
        if (res.IsSuccess) {
          this.$emit("close");
          this.$emit("getList");
        }
      } catch (err) {
        console.log(err);
        this.loading = false;
      }
    },
    canel() {
      this.$emit("close");
    },
    handleRemoveFile() {
      this.form.FileName = null;
      this.form.Path = null;
      this.fileList = [];
    },
    beforeUpload() {
      if (this.fileList.length > 0) {
        this.$alert(this.$t("dictionary:bbrowser:msg:message1"));
        return;
      }
    },
    handlePreview(row, r2) {
      if (row.fullPath) {
        window.open(row.fullPath, "_blank");
      }
    },
    async handleUploadFile(param) {
      this.loading = true;
      var file = await this.fileToBlob(param.file);
      const res = await this.OSSclient.put(
        `/System/Browser/${param.file.name}`,
        file
      );
      this.fileList.push({
        name: param.file.name,
        path: this.$getObjectName(res.url),
        fullPath: this.$getObjectName(res.url),
        url: this.$getObjectName(res.url),
      });
      this.form.Path = this.$getObjectName(res.url);
      this.form.FileName = param.file.name;
      this.loading = false;
    },
  },
};
</script>