WorkloadApp/pages/index/add.vue

<template>
  <view class="content">
    <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.id === 2 || currentType.id === 3"
          label="项目"
        >
          <comboxSearch
            emptyTips="无匹配项"
            placeholder="请选择项目"
            keyName="fullName"
            :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="子类">
          <ld-select
            :list="currentType.children"
            placeholder="请选择子类"
            class="select"
            v-model="formData.subTypeId"
            labelKey="name"
            valueKey="id"
            :disabled="currentType.id == 2"
            @change="onChangeSubType"
          />
        </uni-forms-item>
        <uni-forms-item label="日期">
          <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>
</template>
<script>
import comboxSearch from "@/components/cuihai-combox/cuihai-combox";
import { addWorkHours, queryProject } 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.allProjectList["0"]);
      }
      return this.allProjectList["1"];
    },
  },
  data() {
    return {
      formData: {},
      currentType: {},
      currentSubType: {},
      allProjectList: [],
      day: "",
    };
  },
  onLoad(options) {
    this.day = options.day;
    this.getProject();
  },
  methods: {
    async getProject() {
      let data = {};
      data["0"] = await queryProject({ stage: 0 });
      data["1"] = await queryProject({ stage: 1 });
      this.allProjectList = data;
    },
    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 = [
        {
          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();
    },
    onChangeType(value) {
      this.formData = {
        typeId: value,
        projectId: null,
        subTypeId: null,
      };
      this.currentType = this.typeList.find((item) => item.id == value) || {};
      this.currentSubType = {};
    },
    onChangeProject(index) {
      let project = this.projectList[index];
      this.formData.projectId = project.ID;
      if (this.currentType.id == 2) {
        let subList = this.currentType.children;
        if (project.ID == "0") {
          this.onChangeSubType(subList[0].id);
        } else {
          this.onChangeSubType(subList[1].id);
        }
      }
    },
    onChangeSubType(value) {
      this.formData.subTypeId = value;
      this.currentSubType =
        this.currentType.children.find((item) => item.id == value) || {};
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  height: 80vh;
  width: 90%;
  margin: 0 auto;
  background: #fff;
}
.date {
  line-height: 70rpx;
}
.popup-content {
  padding: 40rpx;
}
.group {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  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>