addSanfangHetong.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <view class="phone-navBar-box">
  3. <view @click="goUpPage" class="nav-bar-icon"></view>
  4. <text class="nav-bar-title">新增三方合同</text>
  5. </view>
  6. <!-- 合同模板 -->
  7. <view class="form-label-select">
  8. <view class="phone-form-label"><text class="form-label-require"></text>合同模板</view>
  9. <picker :range="data.mobanList" mode='selector' :value="data.mobanIndex" range-key="name"
  10. @change="onMobanSelect" class="select-picker-box">
  11. <template v-if="data.mobanIndex==null">请点击选择</template>
  12. <view class="form-radio-select" v-else>
  13. <view>{{ data.mobanList[data.mobanIndex].name }}</view>
  14. </view>
  15. </picker>
  16. </view>
  17. <!-- 客户信息 -->
  18. <kehuCardVue :info="data.kehu"></kehuCardVue>
  19. <!-- 家政人员 -->
  20. <jiazhengCardVue :info="data.jiazheng"></jiazhengCardVue>
  21. <!-- 合同信息 -->
  22. <hetongCardVue :info="data.hetong"></hetongCardVue>
  23. <!-- 其他约定 -->
  24. <qiTaYueDingVue :info="data.qita"></qiTaYueDingVue>
  25. <!-- 家政签名 -->
  26. <qianMingVue :info="data.qianming"></qianMingVue>
  27. <!-- <button @click="handleSelct('kh')">选择客户</button>
  28. <button @click="handleSelct('jz')">选择家政</button> -->
  29. <!-- 客户 -->
  30. <selectKh ref="khRef"></selectKh>
  31. <!-- 家政 -->
  32. <selectJz ref="jzRef"></selectJz>
  33. </template>
  34. <script setup>
  35. import {
  36. ref,
  37. reactive,
  38. nextTick
  39. } from "vue";
  40. import {
  41. onLoad
  42. } from "@dcloudio/uni-app";
  43. import * as httpApi from "@/api/sanfang.js"
  44. import selectKh from "./components/selectKh.vue"
  45. import selectJz from "./components/selectJz.vue"
  46. import hetongCardVue from "./components/hetongCard.vue";
  47. import jiazhengCardVue from "./components/jiazhengCard.vue";
  48. import kehuCardVue from "./components/kehuCard.vue";
  49. import qianMingVue from "./components/qianMing.vue";
  50. import qiTaYueDingVue from "./components/qiTaYueDing.vue";
  51. const data = reactive({
  52. mobanList: [],
  53. mobanIndex: null,
  54. kehu: {
  55. name: '',
  56. idCard: '',
  57. tel: '',
  58. dizhi: ''
  59. },
  60. jiazheng: {},
  61. hetong: {},
  62. qita: '',
  63. qianming: ''
  64. })
  65. const khRef = ref(null)
  66. const jzRef = ref(null)
  67. function handleSelct(code) {
  68. if (code == 'kh') {
  69. khRef.value.handleShow();
  70. } else {
  71. jzRef.value.handleShow();
  72. }
  73. }
  74. function goUpPage() {
  75. uni.navigateBack()
  76. }
  77. function getMoban() {
  78. httpApi.getMobanList().then(res => {
  79. data.mobanList = res.data;
  80. })
  81. }
  82. function onMobanSelect(da) {
  83. data.mobanIndex = da.detail.value
  84. }
  85. onLoad(() => {
  86. getMoban();
  87. })
  88. </script>
  89. <style>
  90. </style>