WorkloadApp/pages/WorkingHours/add.vue

<template>
  <view class="page">
    <view class="content">
      <view class="popup-content">
        <uni-forms ref="baseForm" :modelValue="formData">
          <uni-forms-item label="分类" class="formItem">
            <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"
            label="项目"
            class="formItem"
          >
            <comboxSearch
              emptyTips="无匹配项"
              placeholder="请选择项目"
              keyName="fullName"
              :value="projectName"
              :isJSON="true"
              :candidates="projectList"
              @getValue="onChangeProject"
            />
            <!-- <ld-select
            :list="projectList"
            placeholder="请选择项目"
            class="select"
            v-model="formData.projectId"
            labelKey="fullName"
            valueKey="ID"
            @change="onChangeProject"
          /> -->
          </uni-forms-item>
          <uni-forms-item label="子类" class="formItem">
            <ld-select
              :list="subTypeList"
              placeholder="请选择子类"
              class="select"
              v-model="formData.subTypeId"
              labelKey="fullName"
              valueKey="id"
              :disabled="currentType.id == 2"
              @change="onChangeSubType"
            />
          </uni-forms-item>
          <uni-forms-item label="日期" class="formItem">
            <view class="date">{{ this.day }}</view>
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="group">
        <button @click="close" class="button">取消</button>
        <button @click="submit" type="primary">保存</button>
      </view>
    </view>
  </view>
</template>
<script>
import comboxSearch from "@/components/cuihai-combox/cuihai-combox";
import { addWorkHours, queryProject, queryWorkType } from "@/services/workload";
import { mapState } from "vuex";
export default {
  components: { comboxSearch },
  computed: {
    ...mapState(["typeList"]),
    projectList() {
      let list = [];
      let type = this.currentType;
      if (type.id == 2) {
        list.push({
          fullName: "售前支持(10100)",
          ID: "0",
        });
        return list.concat(this.project);
      }
      return this.project;
    },
  },
  data() {
    return {
      formData: {},
      projectName: "",
      currentType: {},
      currentSubType: {},
      project: [],
      subTypeList: [],
      day: "",
    };
  },
  onLoad(options) {
    this.day = options.day;
  },
  methods: {
    async getProject(value) {
      let data = [];
      data = await queryProject({ stage: value });
      this.project = data;
    },
    async getSubType(params) {
      let res = {};
      res = await queryWorkType(params);
      this.subTypeList = res.data.map((item) => ({
        ...item,
        fullName: `${item.name}(${item.code})`,
      }));
    },
    async 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";
      }
      let params = [
        {
          parent_type_id: Number(formData.typeId),
          type_id: Number(formData.subTypeId),
          comment: "",
          data: [
            {
              project_id: Number(formData.projectId),
              workload: 0,
              day: this.day,
            },
          ],
        },
      ];
      // 新增
      await addWorkHours(params);
      this.close();
    },
    close() {
      uni.navigateBack();
    },
    async onChangeType(value) {
      let item = this.typeList.find((t) => t.id == value);
      this.formData = {
        typeId: value,
        projectId: null,
        subTypeId: null,
      };
      this.currentType = item;
      this.currentSubType = {};
      this.subTypeList = [];
      this.projectName = "";
      if (!item.type) {
        this.getProject(value);
      } else {
        await this.getSubType({ parent_id: item.id });
        if (value == 33) {
          this.onChangeSubType(this.subTypeList[0].id);
        }
      }
    },
    async onChangeProject(index) {
      this.subTypeList = [];
      this.formData.subTypeId = null;
      if (index != -1) {
        let project = this.projectList[index];
        this.formData.projectId = project.ID;
        this.projectName = project.fullName;
        await this.getSubType({
          parent_id: this.currentType.id,
          project_id: project.ID,
        });
        if (this.currentType.id == 35) {
          this.onChangeSubType(this.subTypeList[0].id);
        }
        if (this.currentType.id == 2) {
          if (index == 0) {
            this.onChangeSubType(this.subTypeList[0].id);
          } else {
            this.onChangeSubType(this.subTypeList[1].id);
          }
        }
      }
    },
    onChangeSubType(value) {
      this.formData.subTypeId = value;
      this.currentSubType =
        this.subTypeList.find((item) => item.id == value) || {};
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  height: 80vh;
  width: 90%;
  margin: 0 auto;
  background: #fff;
}
.date {
  line-height: 70rpx;
  padding: 0 20rpx;
}
.popup-content {
  padding: 0 40rpx;
}
.group {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  button {
    width: 50%;
    border-radius: 0;
  }
}

.formItem {
  border-bottom: 1rpx solid #eee;
}
::v-deep {
  .uni-forms-item__inner {
    padding: 20rpx 0;
  }
  .uni-combox {
    border: 0;
  }
  .uni-combox__input-box {
    padding: 10rpx 20rpx;
  }
}
// .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;
// }

.select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 72rpx;
}
</style>