WorkloadApp/pages/Project/add.vue

<template>
  <view class="page">
    <view class="content">
      <view class="contentWrapper">
        <uni-forms
          :modelValue="formData"
          label-position="left"
          class="form"
          ref="form"
          :rules="rules"
        >
          <uni-forms-item
            required
            label="项目名称"
            name="project_name"
            class="formItem"
          >
            <input
              v-model="formData.project_name"
              class="input"
              placeholder="请输入项目名称"
            />
          </uni-forms-item>
          <uni-forms-item
            label="项目类别"
            name="type"
            required
            class="formItem"
          >
            <picker
              @change="selectChangeType"
              :range="typeList"
              :range-key="'name'"
              :value="
                formData.type &&
                typeList.findIndex((item) => item.id == formData.type.id)
              "
            >
              <view class="select" v-if="formData.type">
                {{ `${formData.type.name}(${formData.type.code})` }}
              </view>
              <view class="selectPlaceholder" v-else>请选择项目类别</view>
            </picker>
          </uni-forms-item>
          <uni-forms-item label="流程" name="flow" class="formItem">
            <picker disabled>
              <view class="select">
                {{
                  formData.type &&
                  (formData.type.id == 7 ? "研发立项" : "销售立项")
                }}
              </view>
            </picker>
          </uni-forms-item>
        </uni-forms>
        <uni-forms
          :modelValue="formData"
          label-position="left"
          class="form"
          ref="fullForm"
          :rules="rules"
          v-show="!formData.type || (formData.type && formData.type.id != 7)"
        >
          <uni-forms-item
            label="行业名称"
            name="industry"
            required
            class="formItem"
          >
            <picker
              @change="selectChangeIndustry"
              :range="industryList"
              :range-key="'name'"
              :value="
                formData.industry &&
                typeList.findIndex((item) => item.id == formData.industry.id)
              "
            >
              <view class="select" v-if="formData.industry">
                {{ `${formData.industry.name}(${formData.industry.code})` }}
              </view>
              <view class="selectPlaceholder" v-else>请选择行业</view>
            </picker>
          </uni-forms-item>
          <uni-forms-item
            label="项目地区"
            name="location"
            required
            class="formItem"
          >
            <picker
              mode="multiSelector"
              @columnchange="bindChangeLocationColumn"
              @change="selectChangeLocation"
              :range="locationList"
              :range-key="'name'"
              :value="locationIndex"
            >
              <view class="select" v-if="formData.location">
                {{ `${formData.location.name}(${formData.code.location})` }}
              </view>
              <view class="selectPlaceholder" v-else>请选择项目地区</view>
            </picker>
          </uni-forms-item>
          <uni-forms-item
            label="项目简称"
            name="name"
            required
            class="formItem"
          >
            <input
              v-model="formData.name"
              class="input"
              @blur="onChangeName"
              placeholder="请输入项目简称"
            />
          </uni-forms-item>
          <uni-forms-item
            label="项目期数"
            name="version"
            required
            class="formItem"
          >
            <picker
              @change="selectChangeVersion"
              :range="versionList"
              :value="formData.version && formData.version - 1"
            >
              <view class="select" v-if="formData.version">
                {{ versionList[formData.version - 1] }}
              </view>
              <view class="selectPlaceholder" v-else>请选择期数</view>
            </picker>
          </uni-forms-item>
          <uni-forms-item label="项目编号" name="code" class="formItem">
            <view class="input">
              {{
                `${formData.code.type}-${formData.code.industry}-${formData.code.location}-${formData.code.name}-${formData.code.version}`
              }}
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="group">
        <button @click="onHandleSubmit(0)" class="commit">取消</button>
        <button @click="onHandleSubmit(1)" type="primary" class="commit">
          确定
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  queryProjectType,
  queryIndustry,
  queryFlow,
  createApproval,
  updateApproval,
} from "@/services/project";
import provinces from "./provinces";
import { mapState } from "vuex";
const versionList = ["一期", "二期", "三期", "四期", "五期"];
export default {
  data() {
    return {
      formData: {
        project_name: null,
        type: null,
        flow: null,
        industry: null,
        location: null,
        name: null,
        version: null,
        code: {
          type: "***",
          industry: "***",
          location: "***",
          name: "***",
          version: "*",
        },
      },
      rules: {
        project_name: {
          rules: [
            {
              required: true,
              errorMessage: "请输入项目名称",
            },
          ],
        },
        type: {
          rules: [
            {
              required: true,
              errorMessage: "请选择项目类别",
            },
          ],
        },
      },
      fullRules: {
        industry: {
          rules: [
            {
              required: true,
              errorMessage: "请选择行业",
            },
          ],
        },
        location: {
          rules: [
            {
              required: true,
              errorMessage: "请选择地区",
            },
          ],
        },
        name: {
          rules: [
            {
              required: true,
              errorMessage: "请输入项目简称",
            },
            {
              maxLength: 3,
              errorMessage: "项目简称不能超过3位",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                if (value.match(/[^A-Za-z]/g)) {
                  callback("项目简称只能是英文字符");
                } else {
                  callback();
                }
              },
            },
          ],
        },
        version: {
          rules: [
            {
              required: true,
              errorMessage: "请选择期数",
            },
          ],
        },
      },
      project_id: 0,
      typeList: [],
      industryList: [],
      flowList: [],
      versionList,
      provinces,
      locationList: [provinces, []],
      locationIndex: [0, 0],
    };
  },
  computed: {
    ...mapState(["currentProject"]),
  },
  onLoad(options) {
    if (options.project_id) {
      this.project_id = options.project_id;
    }
    this.init(options);
  },
  onReady() {
    this.$refs.fullForm.setRules(this.fullRules);
  },
  methods: {
    async submitHelper(full) {
      let payload = {
        project_name: this.formData.project_name,
        type_id: Number(this.formData.type.id),
        flow_id: Number(this.formData.flow.id),
        node_id: this.flowList.find((item) => item.id == this.formData.flow.id)
          .Nodes[0].id,
      };
      if (full) {
        payload = {
          ...payload,
          industry_id: Number(this.formData.industry.id),
          location: this.formData.location.name,
          location_code: this.formData.location.code,
          name: this.formData.name,
          version: this.formData.version + "",
          project_full_code:
            this.formData.code.type +
            this.formData.code.industry +
            this.formData.code.location +
            this.formData.code.name +
            this.formData.code.version,
        };
      }
      if (this.project_id == 0) {
        await createApproval(payload);
        uni.navigateBack();
      } else {
        payload.id = Number(this.project_id);
        await updateApproval(payload);
        uni.navigateBack({
          delta: 2,
        });
      }
    },
    onHandleSubmit(value) {
      if (value) {
        this.$refs.form.validate((err) => {
          if (!this.formData.type || this.formData.type.id != 7) {
            this.$refs.fullForm.validate((errFull) => {
              if (!err && !errFull) {
                this.submitHelper(1);
              }
            });
          } else {
            if (!err) {
              this.submitHelper(0);
            }
          }
        });
      } else {
        uni.navigateBack();
      }
    },
    async init(options) {
      let res;
      res = await queryProjectType();
      this.typeList = res.data;
      res = await queryIndustry();
      this.industryList = res.data;
      res = await queryFlow();
      this.flowList = res.data;
      let form = this.formData;
      let code = this.formData.code;
      let current = this.currentProject;
      if (options.project_id) {
        form.project_name = current.project_name;
        form.type = this.typeList.find(
          (item) => item.id == this.currentProject.type_id
        );
        form.flow = this.flowList.find(
          (item) => item.id == this.currentProject.flow_id
        );
        if (current.type_id != 7) {
          form.industry = this.industryList.find(
            (item) => item.id == this.currentProject.industry_id
          );
          form.location = {
            name: current.location,
            code: current.location_code,
          };
          form.name = current.name;
          form.version = current.version;
          code.type = form.type.code;
          code.industry = form.industry.code;
          code.location = form.location.code;
          code.name = form.name;
          code.version = form.version;

          const searchLocation = (list, name) => {
            for (let i = 0; i < list.length; ++i) {
              if (list[i].children) {
                let childrenIndex = searchLocation(list[i].children, name);
                if (childrenIndex[0] != -1) return [i, childrenIndex[0]];
              } else {
                if (list[i].name == name) return [i, 0];
              }
            }
            return [-1, -1];
          };

          this.locationIndex = searchLocation(this.provinces, current.location);
          if (this.provinces[this.locationIndex[0]].children)
            this.locationList[1] =
              this.provinces[this.locationIndex[0]].children;
        }
      }
    },
    binddata(name, value) {
      this.$refs.fullForm.setValue(name, value);
    },
    selectChangeType(e) {
      let form = this.formData;
      let code = this.formData.code;
      form.type = this.typeList[e.target.value];
      code.type = form.type.code;
      this.$refs.form.setValue("type", e.target.value);
      if (form.type.id == 7) {
        form.flow = this.flowList.find((item) => item.id == 4);
        form.industry = null;
        form.location = null;
        form.name = null;
        form.version = null;
        code.industry = "***";
        code.location = "***";
        code.name = "***";
        code.version = "*";
      } else form.flow = this.flowList.find((item) => item.id == 1);
    },
    selectChangeIndustry(e) {
      this.formData.industry = this.industryList[e.target.value];
      this.formData.code.industry = this.formData.industry.code;
      this.binddata("industry", e.target.value);
    },
    onChangeName(e) {
      let name = e.detail.value.toUpperCase();
      while (name.length < 3) name += "V";
      this.formData.name = name;
      this.formData.code.name = name;
    },
    selectChangeVersion(e) {
      this.formData.version = e.target.value + 1;
      this.formData.code.version = this.formData.version + "";
      this.binddata("version", e.target.value);
    },
    bindChangeLocationColumn(e) {
      if (e.target.column == 0) {
        this.locationList[1] = this.provinces[e.target.value].children || [];
        this.locationIndex = [e.target.value, 0];
      }
    },
    selectChangeLocation(e) {
      let multiIndex = e.target.value;
      this.locationIndex = multiIndex;
      // let location = this.formData.location;
      // let locationCode = this.formData.code.location;
      let location = this.provinces[multiIndex[0]].children
        ? this.provinces[multiIndex[0]].children[multiIndex[1]]
        : this.provinces[multiIndex[0]];
      location.code =
        location.code.length == 4 ? location.code.substr(1) : location.code;
      this.formData.location = location;
      this.formData.code.location = location.code;
      this.binddata("location", e.target.value);
    },
  },
};
</script>

<style lang="less" scoped>
.contentWrapper {
  display: flex;
  flex-wrap: wrap;
}
.form {
  margin: 0 5%;
  width: 100%;
}
.formItem {
  border-bottom: 1rpx solid #eee;
}
::v-deep {
  .uni-forms-item__inner {
    padding: 10rpx 0;
  }
}
.input {
  text-align: end;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 72rpx;
  font-size: 28rpx;
}
.select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 72rpx;
}
.selectPlaceholder {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 72rpx;
  color: #808080;
}
.group {
  width: 100%;
  display: flex;
  position: fixed;
  flex-wrap: wrap;
  justify-content: flex-start;
  bottom: 0;
  left: 0;
  .commit {
    width: 50%;
    border-radius: 0;
    margin: inherit;
  }
}
</style>