WorkloadApp/pages/WorkingHours/AddModal.vue

<template>
  <uni-popup ref="popup" background-color="#fff">
    <view class="popup-content">
      <uni-forms ref="baseForm" :modelValue="formData">
        <uni-forms-item label="分类">
          <ld-select
            :list="typeList"
            placeholder="请选择分类"
            class="select"
            v-model="formData.typeId"
            labelKey="name"
            valueKey="id"
            @change="onChangeType"
          />
        </uni-forms-item>
        <uni-forms-item
          v-show="currentType.type === 0 || currentSubType.type === 0"
          label="项目"
        >
          <ld-select
            :list="projectList"
            placeholder="请选择项目"
            class="select"
            v-model="formData.projectId"
            labelKey="Name"
            valueKey="ID"
            @change="onChangeProject"
          />
        </uni-forms-item>
        <uni-forms-item label="子类">
          <ld-select
            :list="currentType.children"
            placeholder="请选择子类"
            class="select"
            v-model="formData.subTypeId"
            labelKey="name"
            valueKey="id"
            @change="onChangeSubType"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="group">
      <button @click="close" class="button">取消</button>
      <button @click="submit" type="primary">保存</button>
    </view>
  </uni-popup>
</template>
<script>
export default {
  props: ["projectList", "typeList"],
  data() {
    return {
      formData: {},
      currentType: {},
      currentSubType: {},
    };
  },
  methods: {
    open() {
      this.$refs.popup.open("center");
    },
    close() {
      this.formData = {};
      this.currentType = {};
      this.currentSubType = {};
      this.$refs.popup.close();
    },
    submit() {
      let type = this.currentType;
      let subType = this.currentSubType;
      let formData = this.formData;
      if (type.type == 0 || subType.type == 0) {
        if (!formData.projectId) {
          uni.showToast({
            title: "请选择项目",
            icon: "none",
          });
          return;
        }
      } else {
        formData.projectId = "0";
      }
      this.$emit("submit", this.formData);
      this.close();
    },
    onChangeType(value) {
      this.formData = {
        typeId: value,
        projectId: null,
        subTypeId: null,
      };
      this.currentType = this.typeList.find((item) => item.id == value) || {};
      this.currentSubType = {};
    },
    onChangeProject(value) {
      this.formData.projectId = value;
    },
    onChangeSubType(value) {
      this.formData.subTypeId = value;
      this.currentSubType =
        this.currentType.children.find((item) => item.id == value) || {};
    },
  },
};
</script>
<style lang="less" scoped>
.popup-content {
  padding: 40rpx;
}
.group {
  display: flex;
  button {
    width: 50%;
    border-radius: 0;
  }
}
.select {
  width: 100%;
  margin-bottom: 25rpx;
  background: #fff;
  height: 70rpx;
  color: #777777;
  padding-left: 20rpx;
  font-size: 24rpx;
  border-radius: 0px;
  border-bottom: 1px solid #333;
}
</style>