xnzt/xnzt-h5/pages/formPages/enterprise/managementForm/index.vue

<template>
  <!-- <div class="management">management</div> -->
  <view class="managementForm">
    <view>
      <uni-forms
        ref="form"
        :rules="rules"
        :model="form"
        class="form"
        label-position="top"
        label-width="100%"
        validate-trigger="bind"
      >
        <uni-forms-item label="年度" name="baseYear">
          <uni-easyinput
            v-model="form.baseYear"
            placeholder="请输入年度"
            type="number"
          />
        </uni-forms-item>
        <uni-forms-item label="年度生产经营总收入(万元)" name="totalIncome">
          <uni-easyinput
            v-model="form.totalIncome"
            placeholder="请输入年度生产经营总收入(万元)"
            type="number"
          />
        </uni-forms-item>
        <uni-forms-item label="年度生产经营支出(万元)" name="totalPay">
          <uni-easyinput
            v-model="form.totalPay"
            placeholder="请输入年度生产经营支出(万元)"
            type="number"
          />
        </uni-forms-item>
        <uni-forms-item label="年度成员人均纯收入(万元)" name="memberAvgIncome">
          <uni-easyinput
            v-model="form.memberAvgIncome"
            placeholder="请输入年度成员人均纯收入(万元)"
            type="number"
          />
        </uni-forms-item>
        <uni-forms-item label="年度生产经营情况报告" name="managementReportUrl">
          <uni-file-picker
            fileMediatype="image"
            limit="1"
            mode="grid"
            title="最多选择1张图片"
            v-model="managementReportUrl"
            @progress="progress"
            @select="select"
          />
        </uni-forms-item>
      </uni-forms>
    </view>

    <view style="height: 44px">
      <button v-if="false">
        <text>{{ "测 试" }}</text>
      </button>
    </view>

    <view v-if="true" class="foot">
      <button @click="cencel" :plain="false" class="cencel">
        <text>{{ "取 消" }}</text>
      </button>
      <button @click="showConfirm" type="primary" class="confirm">
        <text>{{ "确 认" }}</text>
      </button>
    </view>
  </view>
</template>

<script>
import {
  listManagement,
  getManagement,
  delManagement,
  addManagement,
  updateManagement,
} from "@/api/enterprise/management";

export default {
  name: "management",
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      managementReportUrl: [],
      options: {},
      form: {},
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        baseId: null,
        baseYear: null,
        totalIncome: null,
        totalPay: null,
        memberAvgIncome: null,
        managementReportUrl: null,
        addTime: null,
        editTime: null,
        state: "0",
      },
      rules: {
        baseYear: {
          rules: [
            {
              required: true,
              errorMessage: "请输入年度",
            },
          ],
        },
        totalIncome: {
          rules: [
            {
              required: true,
              errorMessage: "请输入年度生产经营总收入(万元)",
            },
          ],
        },
        totalPay: {
          rules: [
            {
              required: true,
              errorMessage: "年度生产经营支出(万元)",
            },
          ],
        },
      },
    };
  },
  computed: {},
  methods: {
    getManagementById() {
      this.loading = true;
      getManagement(this.options.id).then((res) => {
        this.form = res.data;
        if (
          this.form.managementReportUrl === "" ||
          this.form.managementReportUrl === null ||
          this.form.managementReportUrl === undefined
        ) {
          this.$set(this.form, ["managementReportUrl"], []);
        } else {
          let managementReportUrl = [];
          managementReportUrl.push(this.form.managementReportUrl);
          this.$set(this.form, ["managementReportUrl"], managementReportUrl);
          this.managementReportUrl = managementReportUrl;
        }
        this.loading = false;
      });
    },
    async getRouter(options) {
      this.options = options;
    },
    select(tempFiles) {
      let managementReportUrl = [];
      managementReportUrl.push(tempFiles.tempFilePaths);
      this.form.managementReportUrl = managementReportUrl;
      this.managementReportUrl = managementReportUrl;
    },
    progress(progress, tempFiles) {
      console.log("-------> files <---------");
      console.log(tempFiles);
      console.log("-------> progress <---------");
      console.log(progress);
    },
    naviBack(isNew) {
      let pages = getCurrentPages(); //关于获取页面的官方文档https://uniapp.dcloud.io/api/window/window
      let prevPage = pages[pages.length - 2];
      uni.navigateBack({
        delta: 1,
        success: () => {
          if (isNew !== undefined) {
            setTimeout(function () {
              prevPage.$vm.getMsg(isNew);
            }, 200);
          }
        },
      });
    },
    cencel() {
      this.naviBack();
    },
    submitForm() {
      let form = this.form;
      let isNew =
        this.form.id === null ||
        this.form.id === undefined ||
        this.form.id === "";
      if (
        form.managementReportUrl === undefined ||
        form.managementReportUrl === [] ||
        form.managementReportUrl === null ||
        form.managementReportUrl.length === 0
      ) {
        form.managementReportUrl = "";
      } else {
        form.managementReportUrl = form.managementReportUrl[0].toString(",");
      }
      if (isNew) {
        addManagement(this.form).then((response) => {
          this.naviBack(isNew);
        });
      } else {
        updateManagement(this.form).then((response) => {
          this.naviBack(isNew);
        });
      }
    },
    showConfirm() {
      this.$refs["form"].validate().then((res) => {
        this.$cus_modal.confirm().then((conf_res) => {
          if (conf_res.confirm === true) {
            this.submitForm();
          }
        });
      });
    },
  },
  watch: {
    loading: {
      handler: function (val, oldVal) {
        if (val === true) {
          this.$modal.loading("加载中，请耐心等待...");
        } else {
          this.$modal.closeLoading();
        }
      },
      deep: true,
    },
  },

  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.getRouter(options).then(() => {
      if (options.id != undefined) {
        this.getManagementById();
      }
    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {
    const that = this
    return that.$listenOB.goBack()
  },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style lang="scss" scoped>
page {
  background: white;
}

.managementForm {
  background-color: white;
  height: calc(100%);

  .foot {
    width: 100vw;
    height: 44px;
    bottom: 0px;
    display: flex;
    position: fixed;
    z-index: 2;

    .cencel {
      border-radius: 0px;
      border: 0px;
      width: 50%;
      background-color: white;
    }

    .confirm {
      border-radius: 0px;
      border: 0px;
      width: 50%;
      color: white;
    }
  }
}
.form {
  text-align: center;
  margin: auto;
  width: 80%;

  /deep/ .flex-radio {
    uni-radio-group {
      width: 100%;

      .checklist-group {
        display: flex;
        justify-content: space-evenly;
      }
    }
  }

  /deep/ .uni-forms-item {
    .uni-forms-item__content {
      .uni-file-picker {
        .uni-file-picker__header {
          .file-title {
            span {
              color: #ff0000a6;
            }
          }
        }
      }

      .uni-mt-5 {
        .uni-icons {
          background: #007aff21;
          line-height: 35px;
          height: 35px;
        }
      }

      .uni-select-cy {
        z-index: 1;

        .uni-select-cy-select {
          z-index: -500;
        }
      }
    }
  }
}
</style>