移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

438 lines
14 KiB

  1. <template>
  2. <div class="app-container">
  3. <van-nav-bar left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" >
  4. <template #title>
  5. <div class="tb_main">
  6. {{ $route.query.deptName }}
  7. </div>
  8. </template>
  9. </van-nav-bar>
  10. <div class="tap_block">
  11. <p @click="$router.push({path:'/contracted/village/contractor', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">承包方</p>
  12. <p class="active">发包方</p>
  13. <p @click="$router.push({path:'/contracted/village/massif', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">地块</p>
  14. <p @click="$router.push({path:'/contracted/village/map', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">地图</p>
  15. </div>
  16. <div class="list_main">
  17. <van-form ref="formData">
  18. <van-field v-model="form.fbfbm" label="代码:" placeholder="请输入代码" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" :disabled="isDisabled">
  19. <template #button v-if="!isDisabled">
  20. <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>
  21. </template>
  22. </van-field>
  23. <van-field v-model="form.fbfmc" label="名称:" placeholder="请输入名称" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" />
  24. <van-field v-model="form.fbffzrxm" label="负责人姓名:" placeholder="请输入负责人姓名" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" />
  25. <van-field v-model="credentialTypeText" label="证件类型:"
  26. placeholder="请选择证件类型"
  27. required
  28. :rules="[{ required: true }]"
  29. :border="false"
  30. input-align="right"
  31. right-icon="arrow-down"
  32. label-width="auto"
  33. readonly
  34. clickable
  35. @click="showCredentialType = true"
  36. />
  37. <van-popup v-model="showCredentialType" position="bottom">
  38. <van-picker
  39. show-toolbar
  40. :columns="credentialTypeOptions"
  41. value-key="dictLabel"
  42. @confirm="onConfirmTypeOptions"
  43. @cancel="showCredentialType = false"
  44. />
  45. </van-popup>
  46. <van-field v-model="form.fzrzjhm" label="证件号码:" placeholder="请输入证件号码" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" />
  47. <van-field v-model="form.lxdh" label="联系电话:" placeholder="请输入联系电话" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" />
  48. <van-field v-model="form.fbfdz" label="地址:" placeholder="请输入地址" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" />
  49. <van-field v-model="form.yzbm" label="邮政编码:" placeholder="请输入邮政编码" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" />
  50. <van-field v-model="form.fbfdcjs" label="调查记事:" placeholder="请输入调查记事" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" />
  51. <van-field label="签字图片:" readonly :border="false" label-width="auto" />
  52. <img :src="'/api'+form.fbfdcqz" width="100%" alt="" />
  53. </van-form>
  54. <div class="btn_main">
  55. <p class="btn" @click="submitForm">保存</p>
  56. <p class="btn1" @click="handleSign">签字</p>
  57. </div>
  58. </div>
  59. <van-popup v-model="showSignPopup" closeable position="right" :style="{ height: '100%' }" >
  60. <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">
  61. <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
  62. <vue-esign
  63. ref="esign"
  64. class="mySign"
  65. :width="500"
  66. :height="height"
  67. :isCrop="signature.isCrop"
  68. :lineWidth="signature.lineWidth"
  69. :lineColor="signature.lineColor"
  70. :bgColor.sync="signature.bgColor"
  71. />
  72. </div>
  73. <img src="../../../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
  74. <div class="signature-footer">
  75. <van-button @click="handleReset" class="clearBtn" type="info" plain size="small">清空画板</van-button>
  76. <van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>
  77. </div>
  78. </van-cell-group>
  79. </van-popup>
  80. </div>
  81. </template>
  82. <script>
  83. import Cookies from "js-cookie";
  84. import { listFbf, addFbf, updateFbf, manualSignature, generateEmployerCode } from "@/api/contracted/fbf";
  85. import vueEsign from "vue-esign";
  86. import $ from "jquery";
  87. export default {
  88. name: "contractedVillageContractor",
  89. components: {
  90. vueEsign
  91. },
  92. data() {
  93. return {
  94. form: {}, // 发包方信息表单
  95. isDisabled: false, // 是否禁用
  96. credentialTypeOptions: [], // 证件类型字典
  97. credentialTypeText: null, // 证件类型标签名
  98. showCredentialType: false, // 控制证件类型字典弹出层的显示和隐藏
  99. // 控制签字面板的显示和隐藏
  100. showSignPopup: false,
  101. height: null,
  102. //电子签名
  103. signature: {
  104. lineWidth: 6, // 画笔的线条粗细
  105. lineColor: "#000000", // 画笔的颜色
  106. bgColor: "", // 画布的背景颜色
  107. resultImg: "", // 最终画布生成的base64图片
  108. isCrop: false, // 是否裁剪,在画布设定尺寸基础上裁掉四周空白部分
  109. },
  110. };
  111. },
  112. created() {
  113. this.height = window.screen.height * 1.28 - 20;
  114. this.getDicts("cert_type").then(response => {
  115. this.credentialTypeOptions = response.data;
  116. });
  117. this.getDetail();
  118. },
  119. methods: {
  120. getDetail() {
  121. listFbf({deptId: this.$route.query.deptId}).then(response => {
  122. if (response.rows.length > 0) {
  123. this.form = response.rows[0];
  124. this.isDisabled = true;
  125. this.$nextTick(() => {
  126. this.credentialTypeText = this.selectDictLabel(this.credentialTypeOptions, this.form.fzrzjlx);
  127. });
  128. } else {
  129. this.resetForm();
  130. this.isDisabled = false;
  131. }
  132. });
  133. },
  134. generateCode() {
  135. generateEmployerCode({deptId: this.$route.query.deptId}).then(response => {
  136. this.$set(this.form, 'fbfbm', response.data);
  137. });
  138. },
  139. onConfirmTypeOptions(value){
  140. this.form.fzrzjlx = value.dictValue;
  141. this.credentialTypeText = value.dictLabel;
  142. this.showCredentialType = false;
  143. },
  144. submitForm() {
  145. this.$refs.formData.validate().then(() => {
  146. if (this.form.id) {
  147. updateFbf(this.form).then(response => {
  148. if (response.code == 200) {
  149. this.$toast({
  150. icon: 'success',
  151. message: '保存成功',
  152. duration:"1000",
  153. });
  154. }
  155. });
  156. } else {
  157. this.form.deptId = this.$route.query.deptId;
  158. addFbf(this.form).then(response => {
  159. if (response.code == 200) {
  160. this.$toast({
  161. icon: 'success',
  162. message: '保存成功',
  163. duration:"1000",
  164. onClose: () => {
  165. this.getDetail();
  166. }
  167. });
  168. }
  169. });
  170. }
  171. }).catch(() => {
  172. this.$notify({ type: 'danger', message: '请填写完整的表单项' });
  173. });
  174. },
  175. resetForm() {
  176. this.form = {
  177. deptId: null,
  178. fbfbm: null,
  179. fbfmc: null,
  180. fbffzrxm: null,
  181. fzrzjlx: null,
  182. fzrzjhm: null,
  183. lxdh: null,
  184. fbfdz: null,
  185. yzbm: null,
  186. fbfdcjs: null,
  187. fbfdcqz: null
  188. }
  189. },
  190. handleSign() {
  191. this.showSignPopup = true;
  192. this.handleReset();
  193. },
  194. canvasTTdown() {
  195. $('#canvasTT').css('display', 'none');
  196. },
  197. // 清空画板
  198. handleReset() {
  199. if (this.$refs.esign) {
  200. this.$refs.esign.reset();
  201. }
  202. $('#canvasTT').css('display', 'block')
  203. },
  204. // 生成签字图片
  205. handleGenerate() {
  206. this.$refs.esign
  207. .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
  208. .then((res) => {
  209. this.signature.resultImg = res;
  210. let wj = this.dataURLtoBlob(res);
  211. let param = new FormData(); // 创建form对象
  212. param.append('file', wj); // 通过append向form对象添加数据
  213. param.append('deptId', this.$route.query.deptId);
  214. manualSignature(param).then(response => {
  215. if (response.code === 200) {
  216. this.$toast({
  217. icon: 'success', // 找到自己需要的图标
  218. message: '签字成功',
  219. duration: "1000",
  220. onClose: () => {
  221. this.showSignPopup = false;
  222. this.form.fbfdcqz = response.data;
  223. }
  224. });
  225. }
  226. });
  227. })
  228. .catch((err) => {
  229. // 画布没有签字时会执行这里提示一下
  230. this.$toast.fail('请签名后再保存签字');
  231. });
  232. },
  233. dataURLtoBlob(dataurl, filename = 'file') {
  234. let arr = dataurl.split(',')
  235. let mime = arr[0].match(/:(.*?);/)[1]
  236. let suffix = mime.split('/')[1]
  237. let bstr = atob(arr[1])
  238. let n = bstr.length
  239. let u8arr = new Uint8Array(n)
  240. while (n--) {
  241. u8arr[n] = bstr.charCodeAt(n)
  242. }
  243. return new File([u8arr], `${filename}.${suffix}`, {
  244. type: mime
  245. })
  246. },
  247. },
  248. };
  249. </script>
  250. <style scoped lang="scss">
  251. .app-container{
  252. background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
  253. background-size: 100% 100%;
  254. height: 100vh;
  255. padding: 0 4vw;
  256. overflow: hidden;
  257. }
  258. /deep/ .van-nav-bar{
  259. background: transparent;
  260. }
  261. /deep/ .van-nav-bar .van-icon{
  262. color: #000000;
  263. }
  264. /deep/ .van-hairline--bottom::after{
  265. border: none;
  266. }
  267. /deep/ .van-search__content{
  268. background: rgba(255,255,255,.5);
  269. }
  270. /deep/ .van-search{
  271. padding: 0;
  272. flex: 1;
  273. }
  274. /deep/ .van-ellipsis{
  275. overflow: initial;
  276. }
  277. /deep/ .van-field--disabled .van-field__label {
  278. color: #646566;
  279. }
  280. .tb_main{
  281. position: relative;
  282. p{
  283. position: absolute;
  284. display: inline-block;
  285. margin-left: 10PX;
  286. }
  287. }
  288. .tb{
  289. font-size: 12px;
  290. color: #ff8900;
  291. background: #daf6e7;
  292. border: 1px solid #d7be6e;
  293. padding: 2PX 8PX;
  294. border-radius: 50PX;
  295. margin-right: 5PX;
  296. }
  297. .tap_block{
  298. width: 100%;
  299. display: flex;
  300. justify-content: space-between;
  301. background: #ebfaf2;
  302. padding: 2PX 4PX;
  303. border-radius: 10PX;
  304. margin-top: 1vh;
  305. .active{
  306. background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
  307. box-shadow: 0 0 10PX #cccccc;
  308. color: #333333;
  309. }
  310. p{
  311. width: 25%;
  312. text-align: center;
  313. padding: 5PX 0;
  314. border-radius: 10PX;
  315. color: #666666;
  316. }
  317. }
  318. .search_main{
  319. display: flex;
  320. margin-top: 2vh;
  321. .search_btn{
  322. background: rgba(255,255,255,.5);
  323. width: 25%;
  324. border-radius: 50PX;
  325. margin-left: 10PX;
  326. padding: 2PX;
  327. .active{
  328. background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
  329. color: #333333;
  330. border-radius: 50PX;
  331. display: flex;
  332. align-items: center;
  333. justify-content: center;
  334. height: 100%;
  335. }
  336. }
  337. }
  338. .second_tap{
  339. display: flex;
  340. align-items: center;
  341. margin-top: 1vh;
  342. p{
  343. background: #dbf1ea;
  344. border: 1px solid #cdcdcd;
  345. color: #5f5f5f;
  346. padding: 5PX 15PX;
  347. margin-right: 3vw;
  348. border-radius: 50PX;
  349. }
  350. .active{
  351. background: #99eecb;
  352. border-color: #48e5a2;
  353. color: #333333;
  354. }
  355. }
  356. .list_main{
  357. margin-top: 2vh;
  358. overflow-y: scroll;
  359. text-align: center;
  360. background: #ffffff;
  361. border-top-left-radius: 10PX;
  362. border-top-right-radius: 10PX;
  363. height: 88vh;
  364. .btn_main{
  365. .btn1{
  366. background-image: linear-gradient(to right,#ffd88e,#fc8a0e);
  367. box-shadow: 0 0 10PX #cccccc;
  368. padding: 10PX 0PX;
  369. border-radius: 50PX;
  370. display: inline-block;
  371. width: 30%;
  372. margin-top: 2vh;
  373. margin-left: 2vw;
  374. }
  375. .btn{
  376. background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
  377. box-shadow: 0 0 10PX #cccccc;
  378. padding: 10PX 0PX;
  379. border-radius: 50PX;
  380. display: inline-block;
  381. width: 30%;
  382. margin-top: 2vh;
  383. }
  384. }
  385. }
  386. .mapBox{
  387. width: 94%;
  388. height: 50vw;
  389. background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
  390. border-radius: 10PX;
  391. margin: 2vh auto;
  392. }
  393. .signature-box {
  394. border: 1px dashed #666;
  395. margin: 2px 20px;
  396. height: 100%;
  397. /*canvas{*/
  398. /* height: 100%!important;*/
  399. /*}*/
  400. }
  401. .signature-footer {
  402. transform: rotate(90deg);
  403. width: auto;
  404. position: absolute;
  405. top: 50%;
  406. left: 0PX;
  407. .clearBtn {
  408. margin-left: 15px;
  409. }
  410. }
  411. </style>