yos_web/src/components/customBtn/index.vue

<template>
  <div>
    <el-button
      :disabled="disabled ? disabled : false"
      :type="disabled?'':type  ? type : 'primary'"
      :size="size ? size : 'mini'"
      @click="submit"
    >{{ $t(btnName) }}</el-button>
    <el-dialog
      v-if="dialogNoteLabel"
      :title="$t('提示')"
      :visible.sync="noteDialogVisible"
      width="400px"
      :append-to-body="true"
    >
      <div>
        <div style="margin-bottom: 5px; font-size: 14px; color: #606266;">{{ $t(dialogTitle) }}</div>
        <el-input v-model="dialogAmount"></el-input>
        <div style="margin: 10px 0 5px; font-size: 14px; color: #606266;">{{ $t(dialogNoteLabel) }}</div>
        <el-input v-model="dialogNote"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noteDialogVisible = false">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="confirmNoteDialog">{{ confirmButtonText ? $t(confirmButtonText) : $t('确定') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    type: String,
    btnName: String,
    message: String,
    idName: String,
    keyName: String,
    id: [String, Number, Array],
    disabled: Boolean,
    idIsArr: Boolean,
    paramData: {
      type: Array,
      default() {
        return [];
      },
    },
    dialog: Boolean,
    dialogTitle: String,
    dialogKey: String,
    checkContent: Boolean,
    checkString: Boolean,
    size: String,
    delType: String,
    errorMessage:String,
    confirmButtonText:String,
    dialogNoteLabel: String,
    dialogNoteKey: { type: String, default: 'note' }
  },
  data() {
    return {
      dialogAmount: '',
      dialogNote: '',
      noteDialogVisible: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    submit() {
      if (this.dialog) {
        if (this.dialogNoteLabel) {
          this.dialogAmount = '';
          this.dialogNote = '';
          this.noteDialogVisible = true;
        } else {
          this.$prompt(this.$t(this.dialogTitle), this.$t("提示"), {
            confirmButtonText: this.confirmButtonText?this.$t(this.confirmButtonText):this.$t("确定"),
            cancelButtonText: this.$t("取消"),
            inputPattern: this.checkContent ? /^[\d.]+$/ : this.checkString ? /^\S.*$/ : "",
            inputErrorMessage: this.$t(this.errorMessage)
          }).then(async ({ value }) => {
            let param = {
              content: {},
            };
            param.id = this.idName;
            param.content[this.keyName] = this.idIsArr ? [this.id] : this.id;
            this.paramData.forEach((item) => {
              param.content[item.key] = item.value;
            });
            param.content[this.dialogKey] = value;
            let res = await this.$api.requested(param);
            if (this.delType === "合作伙伴") {
              if (res.code === 0) {
                this.$message({
                  message: res.data[0].errmsg,
                  type: "error",
                });
              } else {
                this.tool.showMessage(res, () => {
                  this.$emit("onSuccess", res.data);
                });
              }
            } else {
              this.tool.showMessage(res, () => {
                this.$emit("onSuccess", res.data);
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: this.$t('已取消')
            });
          });
        }
      } else {
        this.$confirm(this.$t(this.message), this.$t("提示"), {
          confirmButtonText: this.confirmButtonText?this.$t(this.confirmButtonText):this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }).then(async () => {
          let param = {
            content: {},
          };
          param.id = this.idName;
          param.content[this.keyName] = this.idIsArr ? [this.id] : this.id;
          this.paramData.forEach((item) => {
            param.content[item.key] = item.value;
          });
          let res = await this.$api.requested(param);
          this.tool.showMessage(res, () => {
            this.$emit("onSuccess", res.data);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('已取消')
          });
        });
      }
    },
    async confirmNoteDialog() {
      if (!this.dialogAmount) {
        this.$message({ message: this.$t('请输入金额'), type: 'warning' });
        return;
      }
      if (this.checkContent && !/^[\d.]+$/.test(this.dialogAmount)) {
        this.$message({ message: this.$t(this.errorMessage || '请输入正确的数字'), type: 'error' });
        return;
      }
      let param = {
        content: {},
      };
      param.id = this.idName;
      param.content[this.keyName] = this.idIsArr ? [this.id] : this.id;
      this.paramData.forEach((item) => {
        param.content[item.key] = item.value;
      });
      param.content[this.dialogKey] = this.dialogAmount;
      param.content[this.dialogNoteKey] = this.dialogNote;
      let res = await this.$api.requested(param);
      if (this.delType === '合作伙伴') {
        if (res.code === 0) {
          this.$message({ message: res.data[0].errmsg, type: 'error' });
          return;
        } else {
          this.noteDialogVisible = false;
          this.tool.showMessage(res, () => {
            this.$emit('onSuccess', res.data);
          });
        }
      } else {
        this.noteDialogVisible = false;
        this.tool.showMessage(res, () => {
          this.$emit('onSuccess', res.data);
        });
      }
    }
  },
};
</script>

<style scoped>
</style>