WorkloadApp/pages/Project/add.vue

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

<script>
import { queryProjectType, queryIndustry, queryFlow } 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: "请选择项目类别",
            },
          ],
        },
        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, []],
    };
  },
  computed: {
    ...mapState(["currentProject"]),
  },
  onLoad(options) {
    this.project_id = options.project_id;
    this.init(options);
  },
  onReady() {
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    onHandleSubmit(value) {
      if (value) {
        this.$refs.form.validate((err, formData) => {
          if (!err) {
            console.log("success", formData);
            uni.navigateTo({
              url: "./list",
            });
          }
        });
      } else uni.navigateTo({ url: "./list" });
    },
    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 = current.location;
          form.name = current.name;
          form.version = current.version;
          code.type = form.type.code;
          code.industry = form.industry.code;
          code.location = form.location;
          code.name = form.name;
          code.version = form.version;
        }
      }
    },
    binddata(name, value) {
      this.$refs.form.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.binddata("type", e.target.value);
      if (form.type.id == 7) {
        form.flow = this.flowList.find((item) => item.id == 1);
        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 == 4);
    },
    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) {
      e.target.column == 0 &&
        (this.locationList[1] = this.provinces[e.target.value].children || []);
    },
    selectChangeLocation(e) {
      let multiIndex = e.target.value;
      // let location = this.formData.location;
      // let locationCode = this.formData.code.location;
      let location = provinces[multiIndex[0]].children
        ? provinces[multiIndex[0]].children[multiIndex[1]]
        : provinces[multiIndex[0]];
      let code =
        location.code.length == 4 ? location.code.substr(1) : location.code;
      this.formData.location = location;
      this.formData.code.location = code;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
}
.title {
  width: 100%;
  padding: 0 20px 20px 20px;
  background: #f8f8f8;
  font: 24px bold;
}
.form {
  margin: 20px 10% 0 10%;
  width: 100%;
}
.input {
  border: 1px solid #666;
}
.select {
  width: 100%;
  height: 72rpx;
  line-height: 70rpx;
  border: 1px solid #666;
  padding-left: 20rpx;
}
.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>