1.封装vant picker选择器组件

2.新增大中型下单
3.其他优化

src/api/customerCompany.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 获取企业客户下拉列表
+export function customerCompanyDrop(params) {
+    return request.post(`customerCompany/simpleAll`, params)
+}

src/api/customerLinkman.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 获取客户联系人下拉列表
+export function customerLinkmanDrop(params) {
+    return request.post(`customerLinkman/simpleAll`, params)
+}

src/api/major.js

@@ -2,10 +2,15 @@ import request from '@/utils/request'
 
 // 获取大中型待办任务
 export function getMajorTodoList(params) {
-    return request.get('workTaskRecord/major/todo', {params: params})
+    return request.get('workTaskRecord/major/todo', { params: params })
 }
 
 // 获取大中型待办任务详情
 export function getMajorTodoDetail(params) {
     return request.get(`major/${params}`)
+}
+
+// 大中型新增订单
+export function add(params) {
+    return request.post(`major`, params)
 }

src/components/VanSinglePicker/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <van-field v-model="text" v-bind="$attrs" readonly is-link :name="name" :label="label" @click="show = !show" :rules="rules" :required="required"/>
+    <van-popup :show="show" round position="bottom">
+      <van-picker v-model="selectedValues" :columns="columns" :column-field-names="customFieldName" show-toolbar :title="label" @cancel="show = false" @confirm="onConfirm">
+        <template #empty>
+          <van-empty :image="emptyImage" image-size="80" description="暂无数据" />
+        </template>
+      </van-picker>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import emptyImage from '@/assets/images/custom-empty-image.png';
+
+import { ref, watch, nextTick } from 'vue';
+import { Field, Popup, Picker } from 'vant';
+
+export default {
+  components: {
+    'van-field': Field,
+    'van-popup': Popup,
+    'van-picker': Picker,
+  },
+  props: {
+    // 下拉选项
+    columns: {
+      type: Array,
+      required: true,
+    },
+    // 表单项
+    label: String,
+    // 父组件绑定值
+    modelValue: String,
+    // 自定义 columns 结构中的字段, 结构不一样就调用组件时传入新的格式, 不然组件无法解析
+    customFieldName: {
+      type: Object,
+      // 默认选项格式
+      default: () => ({
+        text: 'text',
+        value: 'value',
+      }),
+    },
+    // 组件name
+    name: String,
+    // 校验规则
+    rules: Array,
+    // 是否显示*标
+    required: Boolean
+  },
+  data() {
+    return {
+      emptyImage,
+      selectedValues: [],
+      show: false,
+      text: '',
+      code: '',
+    };
+  },
+  watch: {
+    modelValue(newVal) {
+      this.reShow();
+    },
+    columns(newVal) {
+      this.reShow();
+    },
+    code(newVal) {
+      // 更新绑定值
+      this.$emit('update:modelValue', newVal);
+      // 传回change事件
+      this.$emit('change', this.code);
+    },
+  },
+  mounted() {
+    nextTick(() => {
+      this.reShow();
+    });
+  },
+  methods: {
+    // 确认选择后触发的方法
+    onConfirm({ selectedOptions }) {
+      this.text = selectedOptions[0][this.customFieldName.text];
+      this.code = selectedOptions[0][this.customFieldName.value];
+      this.show = false;
+    },
+    // 回显方法
+    reShow() {
+      // 判断传入的modelValue是否为空
+      if (this.modelValue) {
+        // 不为空正常给值
+        this.columns.forEach((column) => {
+          if (column[this.customFieldName.value] === this.modelValue) {
+            this.text = column[this.customFieldName.text];
+            // 主要是解决父级修改v-model绑定的值之后,组件中没联动变化
+            this.selectedValues[0] = column[this.customFieldName.value];
+          }
+        });
+      } else {
+        // 为空需要清空组件中之前选择的数据
+        this.text = '';
+        this.code = '';
+        this.selectedValues = [];
+      }
+    },
+  },
+};
+</script>

src/router/index.js

@@ -19,9 +19,10 @@ import AssetsTodoDetailView from '@/views/assets/todoDetail.vue'
 import PersonalIndex from '@/views/personal/index.vue'
 import PersonalTodoDetailView from '@/views/personal/todoDetail.vue'
 
-// 个贷业务
+// 大中型业务
 import MajorIndex from '@/views/major/index.vue'
 import MajorTodoDetailView from '@/views/major/todoDetail.vue'
+import MajorPlaceOrder from '@/views/major/placeOrder.vue'
 
 const routes = [
   // 重定向到首页的路由
@@ -127,6 +128,14 @@ const routes = [
               title: '待办处理-大中型'
             },
           },
+          {
+            path: 'placeOrder',
+            component: MajorPlaceOrder,
+            name: 'majorPlaceOrder',
+            meta: {
+              title: '大中型业务下单'
+            },
+          },
         ]
       }
     ]

src/views/home/index.vue

@@ -23,7 +23,7 @@ import { mapStores } from 'pinia';
 import { useUserStore } from '@/stores/useUserStore';
 import { removeToken } from '@/utils/auth';
 
-import { Tabbar, NavBar } from '@/components';
+import { Tabbar, NavBar } from './components';
 
 export default {
   data() {

src/views/home/start.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="card">
       <h3 class="businessTitle">快速发起</h3>
-      <div class="icon-area">
+      <div class="icon-area" @click="goBench('/index/major/placeOrder')">
         <svg t="1716189375497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709" width="48" height="48">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"

src/views/major/placeOrder.vue

@@ -0,0 +1,420 @@
+<template>
+  <div>
+    <van-nav-bar title="大中型业务下单" left-text="返回" left-arrow @click-left="onClickLeft()" />
+    <div class="form-style">
+      <van-form @submit="addMajorOrder()">
+        <van-cell-group inset>
+          <van-field label="客户经理" v-model="major.clientManager" name="clientManager" readonly />
+          <VanSinglePicker
+            label="订单属性"
+            v-model="major.financial"
+            v-bind:columns="financialColumns"
+            name="financial"
+            placeholder="请选择订单属性"
+            clearable
+            :rules="[{ required: true, message: '请选择订单属性', trigger:'onBlur' }]"
+            :required="true"
+          />
+          <VanSinglePicker
+            label="派单方式"
+            v-model="major.allotType"
+            v-bind:columns="allotColumns"
+            name="allotType"
+            placeholder="请选择派单方式"
+            clearable
+            :rules="[{ required: true, message: '请选择派单方式' }]"
+            :required="true"
+          />
+          <van-field label="订单名称" v-model="major.name" name="name" type="textarea" placeholder="请输入订单名称" :rules="[{ required: true, message: '请输入订单名称' }]" required />
+          <VanSinglePicker
+            label="对象类型"
+            v-model="major.businessObjectType"
+            v-bind:columns="objectTypeColumns"
+            name="businessObjectType"
+            placeholder="请选择对象类型"
+            @change="clearType()"
+            clearable
+            :rules="[{ required: true, message: '请选择对象类型' }]"
+            :required="true"
+          />
+          <VanSinglePicker
+            label="特殊类型"
+            v-model="major.specialType"
+            v-bind:columns="specialTypeColumns"
+            name="specialType"
+            placeholder="请选择特殊类型"
+            clearable
+            v-if="major.businessObjectType === '房地产'"
+          />
+          <VanSinglePicker
+            label="业务类型"
+            v-model="major.businessGener"
+            v-bind:columns="major.businessObjectType === '土地' ? landTypeColumns : houseTypeColumns"
+            name="businessGener"
+            placeholder="请选择业务类型"
+            clearable
+          />
+          <VanSinglePicker
+            label="评估目的"
+            v-model="major.evaluateAim"
+            v-bind:columns="evaluateAimColumns"
+            name="evaluateAim"
+            placeholder="请选择评估目的"
+            clearable
+            :rules="[{ required: true, message: '请选择评估目的' }]"
+            :required="true"
+          />
+          <VanSinglePicker
+            label="客户类型"
+            v-model="major.clienteleType"
+            v-bind:columns="clienteleTypeColumns"
+            name="clienteleType"
+            placeholder="请选择客户类型"
+            @change="changeCustomerType(0)"
+            clearable
+            :rules="[{ required: true, message: '请选择客户类型' }]"
+            :required="true"
+          />
+          <VanSinglePicker
+            label="客户名称"
+            v-model="major.clienteleId"
+            v-bind:columns="customerCompanyColumns"
+            name="clienteleId"
+            placeholder="请选择客户名称"
+            @change="findSubCustomerCompany(0)"
+            clearable
+            :rules="[{ required: true, message: '请选择客户名称' }]"
+            :required="true"
+            v-if="major.clienteleType === '企业'"
+          />
+          <VanSinglePicker
+            label="业务来源"
+            v-model="major.clienteleSubId"
+            v-bind:columns="subCustomerCompanyColumns"
+            name="clienteleSubId"
+            placeholder="请选择业务来源"
+            @change="findCustomerContract()"
+            clearable
+            :rules="[{ required: true, message: '请选择业务来源' }]"
+            :required="true"
+            v-if="major.clienteleType === '企业'"
+          />
+          <VanSinglePicker
+            label="客户联系人"
+            v-model="major.clienteleContactId"
+            v-bind:columns="customerContractColumns"
+            name="clienteleContactId"
+            placeholder="请选择客户联系人"
+            clearable
+            :rules="[{ required: true, message: '请选择客户联系人' }]"
+            :required="true"
+          />
+          <van-field name="dispenseBenefitRadio" label="分配产值" :rules="[{ required: true, message: '请选择客户联系人' }]" required>
+            <template #input>
+              <van-radio-group v-model="major.dispenseBenefit" direction="horizontal">
+                <van-radio name="false">否</van-radio>
+                <van-radio name="true">是</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field name="nonnativeRadio" label="是否异地" :rules="[{ required: true, message: '请选择客户联系人' }]" required>
+            <template #input>
+              <van-radio-group v-model="major.nonnative" direction="horizontal">
+                <van-radio name="false">否</van-radio>
+                <van-radio name="true">是</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field name="refinanceRadio" label="是否续贷" :rules="[{ required: true, message: '请选择客户联系人' }]" required>
+            <template #input>
+              <van-radio-group v-model="major.refinance" direction="horizontal">
+                <van-radio name="false">否</van-radio>
+                <van-radio name="true">是</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field name="loanExpireRadio" label="贷款到期" :rules="[{ required: true, message: '请选择客户联系人' }]">
+            <template #input>
+              <van-radio-group v-model="major.loanExpire" direction="horizontal">
+                <van-radio name="false">否</van-radio>
+                <van-radio name="true">是</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field label="委托人" v-model="major.bailor" name="bailor" placeholder="请输入委托人" :rules="[{ required: true, message: '请输入委托人' }]" :required="true" />
+          <van-field label="委托人地址" v-model="major.bailorAddress" name="bailorAddress" placeholder="请输入委托人地址" />
+          <van-field label="委托联系人" v-model="major.bailorContactName" name="bailorContactName" placeholder="请输入委托联系人" :rules="[{ required: true, message: '请输入委托联系人' }]" :required="true" />
+          <van-field label="委托电话" v-model="major.bailorContactTel" name="bailorContactTel" placeholder="请输入委托电话" :rules="[{ required: true, message: '请输入委托电话' }]" :required="true" />
+          <van-field label="产权人" v-model="major.owner" name="owner" placeholder="请输入产权人" />
+          <van-field label="产权人电话" v-model="major.ownerTel" name="ownerTel" placeholder="请输入产权人电话" />
+          <van-field label="订单备注" v-model="major.remark" name="remark" type="textarea" />
+        </van-cell-group>
+        <div style="margin: 16px;">
+          <van-button round block type="primary" native-type="submit">提交</van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useUserStore } from '@/stores/useUserStore';
+import { showNotify } from 'vant';
+import VanSinglePicker from '@/components/VanSinglePicker/index.vue';
+import { add } from '@/api/major';
+import { customerLinkmanDrop } from '@/api/customerLinkman';
+import { customerCompanyDrop } from '@/api/customerCompany';
+import { commit } from '@/api/workflow';
+
+export default {
+  components: {
+    VanSinglePicker,
+  },
+  data() {
+    return {
+      // 订单属性选择器配置
+      financialColumns: [
+        { text: '金融', value: 'true' },
+        { text: '非金融', value: 'false' },
+      ],
+      // 派单方式选择器配置
+      allotColumns: [
+        { text: '部门轮单', value: '轮单' },
+        { text: '部门指派', value: '指派' },
+      ],
+      // 对象类型选择器配置
+      objectTypeColumns: [
+        { text: '土地', value: '土地' },
+        { text: '房地产', value: '房地产' },
+      ],
+      // 特殊项目类型选择器配置
+      specialTypeColumns: [
+        { text: '在建工程', value: '在建工程' },
+        { text: '加油加气站', value: '加油加气站' },
+        { text: '电站', value: '电站' },
+        { text: '客运站', value: '客运站' },
+      ],
+      // 土地类型
+      landTypeColumns: [
+        { text: '划拨土地价格评估', value: '划拨土地价格评估' },
+        { text: '土地利用总体规划、规划调整、项目规划', value: '土地利用总体规划、规划调整、项目规划' },
+        { text: '城乡建设用地增减挂钩项目', value: '城乡建设用地增减挂钩项目' },
+        { text: '建设用地报件', value: '建设用地报件' },
+        { text: '房屋征收、搬迁社会稳定风险评估', value: '房屋征收、搬迁社会稳定风险评估' },
+        { text: '社会稳定风险评价', value: '社会稳定风险评价' },
+        { text: '自然资源资产负债表项目', value: '自然资源资产负债表项目' },
+        { text: '航空摄影测量', value: '航空摄影测量' },
+        { text: '集体建设用地使用权价格评估', value: '集体建设用地使用权价格评估' },
+        { text: '土地复垦方案', value: '土地复垦方案' },
+        { text: '开发区土地集约利用评价', value: '开发区土地集约利用评价' },
+        { text: '城市土地集约利用评价', value: '城市土地集约利用评价' },
+        { text: '土地基准地价评估', value: '土地基准地价评估' },
+        { text: '土地标定地价评估', value: '土地标定地价评估' },
+        { text: '地价动态监测', value: '地价动态监测' },
+        { text: '建设项目节地评价', value: '建设项目节地评价' },
+        { text: '集体承包土地的经营权流转评估', value: '集体承包土地的经营权流转评估' },
+        { text: '集体经营性建设用地出让地价、租赁地价评估', value: '集体经营性建设用地出让地价、租赁地价评估' },
+        { text: '集体经营性建设用地转让、出资、抵押评估', value: '集体经营性建设用地转让、出资、抵押评估' },
+        { text: '农用地质量分等评估', value: '农用地质量分等评估' },
+        { text: '农用地定级和基准地价评估', value: '农用地定级和基准地价评估' },
+        { text: '集体建设用地定级和基准地价评估', value: '集体建设用地定级和基准地价评估' },
+        { text: '工业用地集约利用评价', value: '工业用地集约利用评价' },
+        { text: '征收农用地区片综合地价评估', value: '征收农用地区片综合地价评估' },
+        { text: '城市低效用地专项规划项目', value: '城市低效用地专项规划项目' },
+      ],
+      // 房地产类型
+      houseTypeColumns: [
+        { text: '司法鉴定中不动产损害赔偿评估', value: '司法鉴定中不动产损害赔偿评估' },
+        { text: '税收部门征税房地产批量评估', value: '税收部门征税房地产批量评估' },
+        { text: '房地产投资项目可行性研究', value: '房地产投资项目可行性研究' },
+        { text: '金融机构已设营业网点市场前景调查分析报告', value: '金融机构已设营业网点市场前景调查分析报告' },
+        { text: '企业国有资产产权无偿划操作方案咨询', value: '企业国有资产产权无偿划操作方案咨询' },
+        { text: '房地产区域市场研究', value: '房地产区域市场研究' },
+        { text: '商业银行押品快速变现价值的量化分析评估', value: '商业银行押品快速变现价值的量化分析评估' },
+        { text: '城市旧城改造、棚户区改造实施规划编制', value: '城市旧城改造、棚户区改造实施规划编制' },
+        { text: '城市旧城改造、棚户区改造项目可行性研究', value: '城市旧城改造、棚户区改造项目可行性研究' },
+        { text: '城市更新项目规划编制', value: '城市更新项目规划编制' },
+        { text: '城市旧城改造、棚户区改造征收、搬迁方案咨询', value: '城市旧城改造、棚户区改造征收、搬迁方案咨询' },
+        { text: '城市更新项目可行性研究', value: '城市更新项目可行性研究' },
+        { text: '以财务报表为目的投资性物业价值评估（投资性房地产市场价值除外）', value: '以财务报表为目的投资性物业价值评估（投资性房地产市场价值除外）' },
+        { text: '住房租赁证券化评估', value: '住房租赁证券化评估' },
+        { text: '房屋征收、搬迁社会稳定风险评估', value: '房屋征收、搬迁社会稳定风险评估' },
+        { text: '政府为出让土地成片大规模土地分等定级研究', value: '政府为出让土地成片大规模土地分等定级研究' },
+        { text: '“城中村”房屋搬迁补偿评估', value: '“城中村”房屋搬迁补偿评估' },
+        { text: '经营性物业租金体系研究', value: '经营性物业租金体系研究' },
+        { text: '存量房地产再开发利用投资价值评估、咨询', value: '存量房地产再开发利用投资价值评估、咨询' },
+        { text: '公共性、公益性房地产评估', value: '公共性、公益性房地产评估' },
+      ],
+      evaluateAimColumns: [
+        { text: '抵押', value: '抵押' },
+        { text: '咨询', value: '咨询' },
+        { text: '融资', value: '融资' },
+        { text: '司法', value: '司法' },
+        { text: '可行性研究', value: '可行性研究' },
+        { text: '租金', value: '租金' },
+        { text: 'BD', value: 'BD' },
+        { text: '其他', value: '其他' },
+      ],
+      // 客户类型
+      clienteleTypeColumns: [
+        { text: '企业', value: '企业' },
+        { text: '个人', value: '个人' },
+      ],
+      // 客户名称
+      customerCompanyColumns: [],
+      // 业务来源
+      subCustomerCompanyColumns: [],
+      // 客户联系人
+      customerContractColumns: [],
+      major: {
+        clientManagerId: null,
+        clientManager: null,
+        financial: 'false',
+        allotType: '轮单',
+        name: null,
+        businessObjectType: '房地产',
+        specialType: null,
+        businessGener: null,
+        evaluateAim: null,
+        clienteleType: '企业',
+        clienteleId: null,
+        clienteleSubId: null,
+        clienteleContactId: null,
+        dispenseBenefit: 'false',
+        nonnative: 'false',
+        refinance: 'false',
+        loanExpire: 'false',
+      },
+    };
+  },
+  computed: {
+    ...mapStores(useUserStore),
+  },
+  created() {
+    this.major.clientManagerId = this.userStore.userInfo.id;
+    this.major.clientManager = this.userStore.userInfo.name;
+    this.changeCustomerType();
+  },
+  methods: {
+    onClickLeft() {
+      history.back();
+    },
+    clearType() {
+      this.major.specialType = null;
+      this.major.businessGener = null;
+    },
+    // 客户类型改变的触发
+    changeCustomerType(val) {
+      // 清空客户信息
+      this.customerCompanyColumns = [];
+      this.subCustomerCompanyColumns = [];
+      this.customerContractColumns = [];
+      this.major.clienteleId = null;
+      this.major.clienteleSubId = null;
+      this.major.clienteleContactId = null;
+
+      // 判断客户类型
+      if (this.major.clienteleType === '个人') {
+        // 个人类型直接获取客户联系人
+        let simpleAll = new Object();
+        simpleAll.ccId = 1;
+        simpleAll.terminal = 0;
+        customerLinkmanDrop(simpleAll).then((res) => {
+          if (res.code === 200) {
+            // 使用 map 方法提取 id 和 name 属性
+            this.customerContractColumns = res.data.map((item) => ({
+              value: String(item.id),
+              text: String(item.name),
+            }));
+          }
+        });
+      } else {
+        let simpleAll = new Object();
+        simpleAll.terminal = 0;
+        customerCompanyDrop(simpleAll).then((res) => {
+          if (res.code === 200) {
+            // 使用 map 方法提取 id 和 name 属性
+            this.customerCompanyColumns = res.data.map((item) => ({
+              value: String(item.id),
+              text: String(item.name),
+            }));
+          }
+        });
+      }
+    },
+    // 获取业务来源
+    findSubCustomerCompany(val) {
+      // 清空业务来源和客户联系人信息
+      this.subCustomerCompanyColumns = [];
+      this.customerContractColumns = [];
+      this.major.clienteleSubId = null;
+      this.major.clienteleContactId = null;
+      // 判断客户名称id不为空
+      if (this.major.clienteleId) {
+        let simpleAll = new Object();
+        simpleAll.terminal = val;
+        simpleAll.parentId = this.major.clienteleId;
+        customerCompanyDrop(simpleAll).then((res) => {
+          if (res.code === 200) {
+            // 使用 map 方法提取 id 和 name 属性
+            this.subCustomerCompanyColumns = res.data.map((item) => ({
+              value: String(item.id),
+              text: String(item.name),
+            }));
+          }
+        });
+      }
+    },
+    // 获取企业的客户联系人信息
+    findCustomerContract() {
+      // 清空客户联系人信息
+      this.customerContractColumns = [];
+      this.major.clienteleContactId = null;
+      let simpleAll = new Object();
+      simpleAll.ccId = this.major.clienteleSubId;
+      customerLinkmanDrop(simpleAll).then((res) => {
+        if (res.code === 200) {
+          // 使用 map 方法提取 id 和 name 属性
+          this.customerContractColumns = res.data.map((item) => ({
+            value: String(item.id),
+            text: String(item.name),
+          }));
+        }
+      });
+    },
+    // 大中型下单
+    addMajorOrder(values) {
+      add(this.major).then((res) => {
+        if (res.code === 200) {
+          if (res.data && res.data.instanceNodeId && res.data.state) {
+            commit(res.data).then((result) => {
+              if (result.code === 200 && result.data) {
+                showNotify({ type: 'success', message: '下单并提交流程成功' });
+              } else {
+                showNotify({ type: 'success', message: '下单成功, 需要手动提交流程' });
+              }
+            });
+          } else {
+            showNotify({ type: 'success', message: '下单成功, 需要手动提交流程' });
+          }
+          history.back();
+        } else {
+          showNotify({ type: 'success', message: '下单失败, 请稍后再试' });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.form-style {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin: 10px;
+}
+</style>