easydo-zcgx-web/src/views/progress/index.vue

<template>
    <div class="progress-content">
        <!-- <el-form class="progress-header">
            <el-form-item :class="isEdit && 'show'" label="应填报日期">
                <div class="input-col">
                    <el-input-number v-model="form.ytbDate" :min="1" :max="28" step-strictly :controls="false"></el-input-number>
                    <el-button :loading="isSaving" type="primary" @click="submit">保 存</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
                <div class="tag-col" @click="isEdit = !isEdit">
                    <el-tag v-if="form.ytbDate" type="primary" size="large">每月{{ form.ytbDate }}日</el-tag>
                    <el-tag v-else type="info" size="large">未设置</el-tag>
                </div>
            </el-form-item>
        </el-form> -->

        <el-tabs v-model="element">
            <el-tab-pane v-for="(label, key) in progressTab" :key="key" :label="label" :name="key"></el-tab-pane>
        </el-tabs>

        <component :is="allComps[element]"></component>
    </div>
</template>

<script>
import API from "@/api/policy/progress";
import allComps from "@/views/progress/component/index";
import { progressTab } from "@/views/progress/main";

export default {
    data() {
        return {
            allComps,
            progressTab,

            // element: "policy_share",
            element: "policy_strive",

            isEdit: false,
            isSaving: false,
            form: {
                ytbDate: null
            }
        }
    },

    // watch: {
    //     isEdit(value) {
    //         if (value) document.body.addEventListener("click", this.close);
    //         else document.body.removeEventListener("click", this.close);
    //     }
    // },

    mounted() {
        this.getCondition();
    },

    methods: {
        getCondition() {
            API.condition.get().then(res => this.form.ytbDate = res.data || null).catch(() => this.form.ytbDate = null);
        },

        cancel() {
            this.getCondition();
            this.isEdit = false;
        },

        submit() {
            if (!this.form.ytbDate) this.cancel();
            else {
                this.isSaving = true;
                API.condition.edit(this.form).then(res => {
                    this.isSaving = false;
                    ElMessage.success("操作成功");
                    this.cancel();
                }).catch(() => this.isSaving = false);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.progress-content {
  padding-top: 10px;
  background: #fff;
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow-light);

  .progress-header {
    margin: 20px;

    .el-form-item {
      margin-bottom: 0;

      .input-col {
        display: flex;
        transition: width 0.2s;
        width: 0;

        .el-input-number {
          display: none;
          width: 100px;

          :deep(.el-input .el-input__wrapper) {
            padding: 1px 11px;

            .el-input__inner {
              text-align: unset;
            }
          }
        }

        .el-input-number + .el-button {
          margin-left: 20px;
        }

        .el-button {
          display: none;
        }
      }

      .tag-col {
        display: inline-flex;

        .el-tag {
          cursor: pointer;
        }
      }
    }

    .el-form-item.show {
      .input-col {
        width: fit-content;

        .el-input-number,
        .el-button {
          display: inline-flex;
        }
      }

      .tag-col {
        display: none;
      }
    }
  }

  .el-tabs {
    padding: 0 20px;

    :deep(.el-tabs__content) {
      display: none;
    }
  }
}
</style>