pbl-teacher-table/src/components/pages/appStore/dialog/addAppDialog.vue

<template>
  <div>
    <el-dialog
      :center="true"
      :visible.sync="show"
      :close-on-click-modal="false"
      width="500px"
      class="addNewAppDialog"
    >
      <div class="a-d-top">
        <div class="a-d-topTit">
          <div v-if="type === 1">创建新应用</div>
          <div v-else>修改应用</div>
        </div>
        <div class="a-d-t-right">
          <span @click="close()">×</span>
        </div>
      </div>
      <div class="bfd_box" v-loading="loading" label-position="top">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <div
            style="display: flex;width: 100%;justify-content: space-between;align-items: center;"
          >
            <el-form-item label="应用图标" prop="icon">
              <el-input
                v-model="form.json.icon"
                placeholder="请输入应用图标（可直接粘贴svg或者点击右侧图标上传图片）"
                style="width: 500px;"
              ></el-input>
            </el-form-item>

            <div
              class="bfd_icon"
              v-loading="uploadIconLoading"
              @click="uploadIcon()"
            >
              <!-- svg -->
              <span
                v-html="form.json.icon"
                v-if="isImageOrSvg(form.json.icon) === 1"
              ></span>
              <!-- 默认图标 -->
              <svg
                v-if="isImageOrSvg(form.json.icon) === 0"
                t="1732605901531"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4275"
                width="200"
                height="200"
              >
                <path
                  d="M179.2 153.6a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V204.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V204.8a153.6 153.6 0 0 1 153.6-153.6z m0 614.4a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V716.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V716.8a153.6 153.6 0 0 1 153.6-153.6z m611.84-403.4048a51.2 51.2 0 0 0-72.3968 0L646.144 232.2432a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968L791.04 159.744z m72.3968-72.3968l72.3968 72.3968a153.6 153.6 0 0 1 0 217.2416l-72.3968 72.3968a153.6 153.6 0 0 1-217.2416 0l-72.3968-72.3968a153.6 153.6 0 0 1 0-217.2416l72.3968-72.3968a153.6 153.6 0 0 1 217.2416 0zM699.7504 896a51.2 51.2 0 0 1 0 102.4A162.1504 162.1504 0 0 1 537.6 836.2496v-110.8992A162.1504 162.1504 0 0 1 699.7504 563.2h110.8992a162.1504 162.1504 0 0 1 162.1504 162.1504v8.448a51.2 51.2 0 0 1-102.4 0v-8.448c0-33.024-26.7264-59.7504-59.7504-59.7504h-110.8992c-33.024 0-59.7504 26.7264-59.7504 59.7504v110.8992c0 33.024 26.7264 59.7504 59.7504 59.7504z"
                  fill="#2C6DD2"
                  p-id="4276"
                ></path>
                <path
                  d="M791.4496 160a51.2 51.2 0 0 0-72.3968 0l-72.448 72.3968a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968l-72.3968-72.3968z"
                  fill="#20C997"
                  p-id="4277"
                ></path>
              </svg>
              <!-- 网络图片 -->
              <el-image
                v-if="isImageOrSvg(form.json.icon) === 2"
                style="width: 100%; height: 100%"
                :src="form.json.icon"
                fit="cover"
              ></el-image>
            </div>
          </div>
          <el-form-item label="应用名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入应用名称"
            ></el-input>
          </el-form-item>
          <div
            style="display: flex;width: 100%;justify-content: space-between;"
          >
            <el-form-item label="应用标签" prop="label">
              <el-input
                v-model="form.label"
                placeholder="请输入应用标签"
                style="width: 300px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="应用类型" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择应用类型"
                style="width: 300px;"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="应用链接" prop="url">
            <el-input
              v-model="form.url"
              placeholder="请输入应用链接"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用简介" prop="detail">
            <el-input
              type="textarea"
              v-model="form.detail"
              style="width: 100%;"
              :rows="3"
              resize="none"
              placeholder="请输入应用简介"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="可见范围"
            style="display: flex;flex-direction: column;align-items: flex-start;"
          >
            <el-radio-group v-model="form.juri">
              <el-radio label="1">私有</el-radio>
              <el-radio label="2">公开组织</el-radio>
              <el-radio label="3">公开所有人</el-radio>
            </el-radio-group>
          </el-form-item>


					<!-- <el-form-item label="权限设置"  style="display: flex;flex-direction: column;align-items: flex-start;">
						<el-radio-group v-model="form.json.copy" style="display: flex;flex-direction: column;">
              <el-radio label="0" class="radioItem">仅体验（用户仅能使用，不可查看设置内容）</el-radio>
              <el-radio label="1" class="radioItem">允许其他用户复制并进行二次创作</el-radio>
            </el-radio-group>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="bfd_bottom">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="submitBtn('ruleForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
let validUrl = (rule, value, callback) => {
  if (value) {
    // 验证链接是否有效
    try {
      new URL(value);
      callback();
    } catch (error) {
      return callback(new Error("请输入有效的链接"));
    }
  }
};
export default {
  props: {
    typeList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      loading: false,
      show: false,
      uploadIconLoading: false,
      type: 1, //1添加，2编辑
      form: {
        name: "",
        label: "",
        detail: "",
        url: "",
        type: "",
        juri: "1",
        stand: "cn",
        json: {
          icon: "",
          copy: "0"
        }
      },
      rules: {
        name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
        url: [{ required: true, message: "请输入应用链接", trigger: "blur" }],
        // nlabel: [
        //   { required: true, message: "请输入应用标签", trigger: "blur" }
        // ],
        // ntype: [{ required: true, message: "请选择应用类型", trigger: "blur" }],
        // ndetail:[{required:true,message:"请输入应用简介",trigger:"blur"}],
        juri: [{ required: true, message: "请选择权限管理", trigger: "blur" }],
        url: [
          { required: true, message: "请输入应用链接", trigger: "blur" },
          { validator: validUrl, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    isImageOrSvg() {
      return value => {
        let _result = 0; //啥也不是
        if (value) {
          const svgPattern = /<svg.*<\/svg>/;
          const imagePattern = /\.(jpeg|jpg|gif|png|svg|bmp|webp)$/i; // 图片链接的正则表达式
          const urlPattern = /^(http|https):\/\/[^ "]+$/; // 网络地址的正则表达式

          if (svgPattern.test(value)) {
            _result = 1;
          } else if (urlPattern.test(value) && imagePattern.test(value)) {
            _result = 2;
          }
        }
        return _result;
      };
    }
  },
  methods: {
    open(data) {
      if (data && data.type === 2) {
        if (!data.form.json) {
          data.form.json = { icon: "", copy: "0" };
        }
				if(!data.form.json.icon){
					data.form.json.icon = ""
				}
				if(!data.form.json.copy){
					data.form.json.copy = "0"
				}

        this.form = data.form;
        this.type = data.type;
      } else {
        this.form = {
          name: "",
          label: "",
          detail: "",
          url: "",
          type: "",
          juri: "1",
          stand: "cn",
          json: {
            icon: "",
            copy: "0"
          }
        };
      }
      this.loading = false;
      this.uploadIconLoading = false;
      this.show = true;
    },
    uploadIcon() {
      if (this.uploadIconLoading) return this.$message.info("请稍等...");
      const input = document.createElement("input");
      input.type = "file";
      input.accept =
        "image/jpeg, image/jpg, image/gif, image/png, image/svg+xml";
      input.onchange = async event => {
        const file = event.target.files[0];
        this.uploadIconLoading = true;
        const validImageTypes = /\.(jpeg|jpg|gif|png|svg)$/i; // 定义有效的图片类型正则表达式

        if (validImageTypes.test(file.name)) {
          let url = await this.uploadFile(file);
          if (url) {
            this.form.json.icon = url;
          }
          this.uploadIconLoading = false;
        } else {
          this.$message.error("请上传有效的图片文件！(jpeg|jpg|gif|png|svg)"); // 提示用户上传有效的图片
        }
      };
      input.click();
    },
    close(flag = false) {
      if (this.loading && !flag) return this.$message.info("请稍等...");
      this.show = false;
      this.init();
    },
    init() {
      this.form = {
        name: "",
        label: "",
        detail: "",
        url: "",
        type: "",
        juri: "1",
        stand: "cn",
        json: {
          icon: "",
          copy: "0"
        }
      };
      this.loading = false;
    },
    submitBtn(ref) {
      if (this.loading) return this.$message.info("请稍等...");
      this.$refs[ref].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$emit("success", this.form, this.type);
        }
      });
    },
    uploadFile(file) {
      return new Promise(resolve => {
        var credentials = {
          accessKeyId: "AKIATLPEDU37QV5CHLMH",
          secretAccessKey: "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"
        }; //秘钥形式的登录上传
        window.AWS.config.update(credentials);
        window.AWS.config.region = "cn-northwest-1"; //设置区域

        var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
        var _this = this;

        if (file) {
          // this.loading = true;
          var params = {
            Key:
              file.name.split(".")[0] +
              new Date().getTime() +
              "." +
              file.name.split(".")[file.name.split(".").length - 1],
            ContentType: file.type,
            Body: file,
            "Access-Control-Allow-Credentials": "*",
            ACL: "public-read"
          }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
          var options = {
            partSize: 2048 * 1024 * 1024,
            queueSize: 2,
            leavePartsOnError: true
          };
          bucket
            .upload(params, options)
            .on("httpUploadProgress", function(evt) {
              //这里可以写进度条
              // _this.progressData.value = parseInt((evt.loaded * 100) / evt.total);
              // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            })
            .send(function(err, data) {
              if (err) {
                _this.$message.error("上传失败");
                resolve(0);
              } else {
                resolve(data.Location);
              }
            });
        }
      });
    }
  }
};
</script>

<style scoped>
.addNewAppDialog >>> .el-dialog {
  min-width: 700px;

  /* height: 900px; */
	height: 780px;
  box-shadow: 0px 0 8px 0px #555555;
  border-radius: 8px;
  background-color: #fff;
  /* top: 0px; */
  /* margin: 0 auto; */
  overflow: hidden;
}
.addNewAppDialog >>> .el-dialog__body {
  height: 100%;
  min-width: 700px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-bottom: 50px;
  padding-top: 10px;
}
.addNewAppDialog >>> .el-dialog__header {
  display: none !important;
}

.a-d-top {
  /* background: #adadad; */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  border-radius: 8px 8px 0 0;
  user-select: none;
  border-bottom: 1px #ccc solid;
}
.a-d-top >>> .el-input__inner {
  width: 320px;
  height: 32px;
}
.a-d-top >>> .el-input__icon {
  line-height: 32px;
}

.a-d-topTit {
  /* width: 171px; */
  /* margin-left: 20px; */
  height: 32px;
  display: flex;
  font-weight: bold;
  font-size: 20px;
  align-items: center;
  font-family: PingFang SC;
  box-sizing: border-box;
  padding: 5px;
  line-height: 22px;
  justify-content: center;
  /* text-align: left; */
}

.a-d-t-right > span {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.bfd_bottom {
  display: flex;
  justify-content: flex-end;
}

.bfd_icon {
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  padding: 5px;
  margin-right: 40px;
  cursor: pointer;
}

.bfd_icon > svg {
  width: 100%;
  height: 100%;
}

.bfd_icon > span {
  width: 100%;
  height: 100%;

  display: block;
}

.bfd_icon > span >>> svg {
  width: 100%;
  height: 100%;
}

.switchForm{
	display: flex;
	align-items: center;
}

.switchForm>span{
	margin-left: 10px;
}

.radioItem{
	margin-bottom: 10px;
}
</style>