ylrz_his_scrm_adminUI/src/views/his/reissueConfig/index.vue

<template>
  <div class="app-container">
    <div
      class="config-card"
      v-loading="cardLoading"
      :element-loading-text="loadingText"
    >
      <div class="config-header">
        <p>配置小程序/飞书补发策略及可用状态</p>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        v-loading="loading"
        class="config-form"
      >
        <el-form-item label="类型" prop="type">
          <el-select
            v-model="form.type"
            placeholder="请选择类型"
            class="form-select"
          >
            <el-option label="小程序" :value="1" />
            <el-option label="飞书" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="小程序" prop="appId">
          <el-select
            v-model="form.appId"
            placeholder="请选择小程序"
            class="form-select"
          >
            <el-option
              v-for="item in appList"
              :key="item.appid"
              :label="item.name"
              :value="item.appid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="答题短链" prop="shortLink">
          <el-input v-model="form.shortLink" :disabled="true" />
        </el-form-item>
        <el-form-item label="答题进度" prop="rate">
          <el-input-number
            v-model="form.rate"
            :min="1"
            :max="100"
            class="form-select"
          />
        </el-form-item>
        <el-form-item label="可用状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="config-footer">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button
          v-if="form.id"
          type="success"
          :loading="shortLinkLoading"
          @click="shortLinkHandle"
          >生成短链</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  getConfigInfo,
  getAppIdList,
  addReissueConfig,
  updateReissueConfig,
  generateAnswerShortLink,
} from "@/api/his/reissueConfig";

export default {
  name: "ReissueConfig",
  data() {
    return {
      appList: [],
      loading: false,
      reissueLoading: false,
      shortLinkLoading: false,
      form: {
        type: null,
        appId: null,
        status: 1,
      },
    };
  },
  computed: {
    cardLoading() {
      return this.reissueLoading || this.shortLinkLoading;
    },
    loadingText() {
      if (this.shortLinkLoading) return "短链生成中，请稍候...";
      if (this.reissueLoading) return "补发中，请稍候...";
      return "";
    },
  },
  created() {
    this.getInfo();
    getAppIdList().then((response) => {
      this.appList = response.data;
    });
  },
  methods: {
    getInfo() {
      this.loading = true;
      getConfigInfo()
        .then((response) => {
          this.form = response.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    shortLinkHandle(){
      this.shortLinkLoading = true;
      generateAnswerShortLink(this.form)
      .then(() => {
        this.msgSuccess("生成短链成功");
        this.getInfo();
      })
      .finally(() => {
        this.shortLinkLoading = false;
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        const api =
          this.form.id != null ? updateReissueConfig : addReissueConfig;
        const successMsg = this.form.id != null ? "修改成功" : "新增成功";
        api(this.form).then(() => {
          this.msgSuccess(successMsg);
          this.getInfo();
        });
      });
    },
  },
};
</script>

<style scoped>
.config-card {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.config-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #ebeef5;
}

.config-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

.config-header p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #909399;
}

.config-form {
  padding: 24px 24px 0;
}

.config-form .el-form-item {
  margin-bottom: 20px;
}

.form-select {
  width: 240px;
}

.config-footer {
  padding: 16px 24px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

/* ========== 手机端适配 ========== */
@media (max-width: 768px) {
  .app-container {
    margin: 0 !important;
    padding: 10px !important;
  }

  .config-card {
    max-width: 100%;
    border-radius: 4px;
    box-shadow: none;
  }

  .config-header {
    padding: 16px 16px 12px;
  }

  .config-header h2 {
    font-size: 16px;
  }

  .config-header p {
    font-size: 12px;
  }

  .config-form {
    padding: 16px 16px 0;
  }

  .config-form .el-form-item {
    margin-bottom: 16px;
  }

  /* 标签置顶，内容撑满 */
  .config-form ::v-deep .el-form-item__label {
    float: none;
    display: block;
    text-align: left;
    line-height: 1.5;
    padding-bottom: 6px;
  }

  .config-form ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

  .form-select {
    width: 100%;
  }

  .config-footer {
    padding: 12px 16px;
    text-align: center;
  }

  .config-footer .el-button {
    display: block;
    width: 100%;
    margin: 0 0 10px;
  }

  .config-footer .el-button:last-child {
    margin-bottom: 0;
  }
}
</style>