placeTabletInfo.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  1. <template>
  2. <van-nav-bar
  3. fixed
  4. title="牌位详细信息"
  5. left-arrow
  6. @click-left="onClickLeft"
  7. :style="{ 'background-color': selectColor }"
  8. />
  9. <div class="main">
  10. <div class="banner">
  11. <img src="../../../../public/loginbg/banner.jpg" alt="" />
  12. </div>
  13. <div class="info">
  14. <van-form @submit="submit" @failed="failed" show-error :show-error-message="false">
  15. <p class="miniTitle">牌位信息-{{ dataitem.brandName }}</p>
  16. <van-cell-group>
  17. <van-field
  18. v-model="dataitem.brandName"
  19. center
  20. required
  21. :rules="[{ required: true }]"
  22. label="牌位名称:"
  23. placeholder="请填写牌位名称"
  24. input-align="right"
  25. />
  26. </van-cell-group>
  27. <van-cell-group>
  28. <van-field
  29. v-model="locationName"
  30. readonly
  31. required
  32. :rules="[{ required: true }]"
  33. label="所属场所:"
  34. placeholder="请选择所属场所"
  35. input-align="right"
  36. right-icon="arrow-down"
  37. @click="hs_site = true"
  38. >
  39. </van-field>
  40. <van-dialog v-model:show="hs_site" title="所属场所" show-cancel-button>
  41. <div class="dialog">
  42. <van-list
  43. v-model:loading="loading"
  44. :finished="finished"
  45. finished-text="没有更多了"
  46. @load="onLoad"
  47. >
  48. <van-radio-group v-model="checked">
  49. <van-cell-group inset>
  50. <van-cell
  51. v-for="item in sitelist"
  52. :key="item"
  53. :title="item.name"
  54. clickable
  55. @click="getsite(item)"
  56. >
  57. <template #right-icon>
  58. <van-radio :name="item.id" @click="getsite(item)"/>
  59. </template>
  60. </van-cell>
  61. </van-cell-group>
  62. </van-radio-group>
  63. </van-list>
  64. </div>
  65. </van-dialog>
  66. </van-cell-group>
  67. <van-cell-group>
  68. <van-field
  69. v-model="dataitem.siteContact"
  70. center
  71. disabled
  72. label="场所联系人:"
  73. placeholder="请填写场所联系人"
  74. input-align="right"
  75. />
  76. </van-cell-group>
  77. <van-cell-group>
  78. <van-field
  79. v-model="dataitem.contactInformation"
  80. center
  81. disabled
  82. label="联系方式:"
  83. placeholder="请填写联系方式"
  84. input-align="right"
  85. />
  86. </van-cell-group>
  87. <van-cell-group>
  88. <van-field
  89. v-model="dataitem.memorialTabletHolder"
  90. center
  91. label="供奉牌位人:"
  92. placeholder="请填写供奉牌位人"
  93. input-align="right"
  94. />
  95. </van-cell-group>
  96. <van-cell-group>
  97. <van-field
  98. v-model="dataitem.memorialTabletHolderPhone"
  99. center
  100. label-width="8em"
  101. label="供奉牌位人电话:"
  102. placeholder="请填写供奉牌位人电话"
  103. input-align="right"
  104. />
  105. </van-cell-group>
  106. <van-cell-group>
  107. <van-field
  108. v-model="dataitem.udCard"
  109. center
  110. label="身份证号:"
  111. placeholder="请填写身份证号"
  112. input-align="right"
  113. />
  114. </van-cell-group>
  115. <van-cell-group>
  116. <van-field
  117. v-model="dataitem.nativePlace"
  118. readonly
  119. label="籍贯:"
  120. placeholder="请选择籍贯地区"
  121. input-align="right"
  122. right-icon="arrow-down"
  123. @click="hs_nativePlace = true"
  124. />
  125. <van-popup v-model:show="hs_nativePlace" round position="bottom">
  126. <van-picker
  127. title="籍贯"
  128. :columns="nativePlace"
  129. :columns-field-names="customFieldName"
  130. @cancel="hs_nativePlace = false"
  131. @confirm="getnativePlace"
  132. />
  133. </van-popup>
  134. </van-cell-group>
  135. <van-cell-group>
  136. <van-field
  137. v-model="dataitem.currentResidence"
  138. center
  139. readonly
  140. label="现居地:"
  141. placeholder="请填写现居地"
  142. input-align="right"
  143. right-icon="arrow-down"
  144. @click="showPlace1 = true"
  145. />
  146. <van-popup v-model:show="showPlace1" round position="bottom">
  147. <van-picker
  148. title="现居地选择"
  149. :columns="options"
  150. :columns-field-names="customFieldName"
  151. @cancel="showPlace1 = false"
  152. @confirm="getPlace1"
  153. />
  154. </van-popup>
  155. </van-cell-group>
  156. <van-cell-group>
  157. <van-field
  158. v-model="dataitem.currentResidenceDel"
  159. center
  160. label="现居地详情:"
  161. placeholder="请填写现居地详情"
  162. input-align="right"
  163. />
  164. </van-cell-group>
  165. <van-cell-group>
  166. <van-field
  167. v-model="dataitem.relationship"
  168. center
  169. label-width="8em"
  170. label="与供奉牌位关系:"
  171. placeholder="请填写与供奉牌位关系"
  172. input-align="right"
  173. />
  174. </van-cell-group>
  175. <van-cell-group>
  176. <van-field
  177. v-model="dataitem.sacrificeExpenses"
  178. center
  179. label-width="10em"
  180. label="供奉费用(元/年):"
  181. placeholder="请填写供奉费用"
  182. input-align="right"
  183. />
  184. </van-cell-group>
  185. <van-cell-group>
  186. <van-field
  187. v-model="dataitem.position"
  188. center
  189. label="牌位位置:"
  190. placeholder="请填写牌位位置"
  191. input-align="right"
  192. />
  193. </van-cell-group>
  194. <van-cell-group>
  195. <van-field
  196. v-model="dataitem.information"
  197. rows="2"
  198. autosize
  199. label-width="8em"
  200. label="被供奉者信息:"
  201. type="textarea"
  202. maxlength="50"
  203. placeholder="请填写被供奉者信息"
  204. show-word-limit
  205. input-align="right"
  206. />
  207. </van-cell-group>
  208. <van-cell-group>
  209. <van-field name="uploader" label-align="top" label="牌位照片:">
  210. <template #input>
  211. <van-uploader
  212. readonly
  213. v-model="fileList"
  214. :max-count="5"
  215. accept=""
  216. :preview-full-image="false"
  217. :before-delete="deleteRead"
  218. @click-upload="chooseImg"
  219. >
  220. </van-uploader>
  221. </template>
  222. </van-field>
  223. </van-cell-group>
  224. <div class="subbtn">
  225. <van-button type="primary" native-type="submit">确认修改</van-button>
  226. <van-button @click="onClickLeft" type="default" hairline
  227. >取消</van-button
  228. >
  229. </div>
  230. </van-form>
  231. </div>
  232. </div>
  233. </template>
  234. <script>
  235. import { useRouter } from "vue-router";
  236. import { onMounted, ref } from "vue";
  237. import { useStore } from "vuex";
  238. import $base from "@/utils/config";
  239. import tools from "@/api/sys/tools";
  240. import placePerson from "@/api/placePerson/placePerson";
  241. import TabletServer from "@/api/tabletManage/TabletServer";
  242. import PlaceRegister from "@/api/placeRegister/placeRegister";
  243. export default {
  244. setup() {
  245. const store = useStore();
  246. // 导航栏颜色
  247. const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
  248. //牌位数据
  249. let dataitem = ref({});
  250. //数据接收
  251. const router = useRouter();
  252. onMounted(() => {
  253. var id = JSON.parse(router.currentRoute.value.query.id);
  254. new TabletServer().queryById(id).then((res) => {
  255. dataitem.value = res;
  256. dataitem.value.pic.split("|").forEach((item) => {
  257. if (item.trim().length > 0) {
  258. fileImg.value.push({
  259. name: decodeURIComponent(
  260. item.substring(item.lastIndexOf("/") + 1)
  261. ),
  262. url: $base +"/"+ item.replace("程序附件//", "程序附件/"),
  263. id: item.replace("程序附件//", "程序附件/"),
  264. });
  265. fileList.value.push({
  266. name: decodeURIComponent(
  267. item.substring(item.lastIndexOf("/") + 1)
  268. ),
  269. url: $base +"/"+ item.replace("程序附件//", "程序附件/"),
  270. id: item.replace("程序附件//", "程序附件/"),
  271. });
  272. }
  273. });
  274. let addressid = dataitem.value.siteName.id;
  275. new PlaceRegister().queryById(addressid).then((res) => {
  276. locationName.value = res.name;
  277. });
  278. });
  279. //籍贯接口
  280. new placePerson().nativePlace().then((res) => {
  281. nativePlace.value.push(...res);
  282. options.value.push(...res);
  283. });
  284. });
  285. // 所属场所
  286. const locationName = ref("");
  287. const checked = ref("");
  288. const sitelist = ref([]);
  289. let hs_site = ref(false);
  290. const getsite = (val) => {
  291. locationName.value = val.name;
  292. const json = Object.assign(dataitem.value, {
  293. siteName: { id: val.id, name: val.name },
  294. siteContact: val.contact,
  295. contactInformation: val.contactNumber,
  296. });
  297. dataitem.value = json;
  298. checked.value = val.id;
  299. };
  300. const loading = ref(false);
  301. const finished = ref(false);
  302. let index = 0;
  303. const onLoad = () => {
  304. loading.value = true;
  305. finished.value = false;
  306. // 异步更新数据
  307. new PlaceRegister()
  308. .religiousList({
  309. current: index + 1,
  310. size: 10,
  311. })
  312. .then(({ records, pages }) => {
  313. sitelist.value = sitelist.value.concat(records);
  314. // 加载状态结束
  315. loading.value = false;
  316. if (index + 1 >= pages) {
  317. finished.value = true;
  318. }
  319. index++;
  320. });
  321. };
  322. //籍贯
  323. const customFieldName = {
  324. text: "name",
  325. value: "id",
  326. };
  327. const options = ref([]);
  328. const nativePlace = ref([]);
  329. let hs_nativePlace = ref(false);
  330. const getnativePlace = ({ selectedOptions }) => {
  331. hs_nativePlace.value = false;
  332. let str = "";
  333. selectedOptions.forEach((item) => {
  334. if (dataitem.nativePlace) {
  335. str = dataitem.nativePlace;
  336. }
  337. str += item.name + "/";
  338. });
  339. dataitem.nativePlace = str;
  340. const json = Object.assign(dataitem.value, { nativePlace: str });
  341. dataitem.value = json;
  342. };
  343. //现居地
  344. let placeAddress = ref("");
  345. let showPlace1 = ref(false);
  346. const getPlace1 = ({ selectedOptions }) => {
  347. showPlace1.value = false;
  348. let str1 = "";
  349. selectedOptions.forEach((item) => {
  350. if (dataitem.currentResidence) {
  351. str1 = dataitem.currentResidence;
  352. }
  353. str1 += item.name + "/";
  354. });
  355. const json = Object.assign(dataitem.value, {
  356. currentResidence: str1,
  357. });
  358. dataitem.value = json;
  359. };
  360. //图片上传
  361. let fileList = ref([]);
  362. let fileImg = ref([]);
  363. const chooseImg = () => {
  364. if (store.state.pctoken != "") {
  365. xm.chooseFile({
  366. count: 1,
  367. name: "file",
  368. url:
  369. $base +
  370. `/sys/file/webupload/upload?uploadPath=placememorialtablets/placeMemorialTablets`,
  371. headers: {
  372. "Content-Type": "multipart/form-data",
  373. "token": store.state.pctoken,
  374. },
  375. }).then((res) => {
  376. let data = res[0].data;
  377. data.name = decodeURIComponent(
  378. data.id.substring(data.url.lastIndexOf("/") + 1)
  379. );
  380. data.url = $base + data.url;
  381. fileImg.value.push(data);
  382. fileList.value.push(data);
  383. });
  384. }
  385. };
  386. // 删除文件
  387. const deleteRead = (file) => {
  388. //删除文件操作
  389. for (let index = 0; index < fileList.value.length; index++) {
  390. if (file.id == fileList.value[index].id) {
  391. fileList.value.splice(index, 1);
  392. if (fileImg.value[index]) {
  393. let delurl = fileImg.value[index].url;
  394. new tools().uploadFiledelete("", delurl).then(({ data }) => {});
  395. fileImg.value.splice(index, 1);
  396. }
  397. }
  398. }
  399. };
  400. //返回
  401. const onClickLeft = () => {
  402. history.back();
  403. };
  404. //校验
  405. const failed = () => {
  406. xm.showToast({
  407. message: "请检查表单必填项是否存在填写遗漏!",
  408. });
  409. };
  410. //数据提交
  411. const submit = () => {
  412. dataitem.value.pic = fileImg.value.map((option) => option.id).join("|");
  413. new TabletServer().save(dataitem.value).then((res) => {
  414. if (res.status == 200) {
  415. xm.showToast({
  416. message: "牌位信息修改成功",
  417. });
  418. router.push({
  419. path: "/placeTablet",
  420. });
  421. }else{
  422. xm.showToast({
  423. message: "牌位信息修改失败",
  424. });
  425. console.log(res);
  426. }
  427. });
  428. };
  429. return {
  430. onClickLeft,
  431. dataitem,
  432. selectColor,
  433. //所属场所
  434. locationName,
  435. checked,
  436. hs_site,
  437. getsite,
  438. sitelist,
  439. loading,
  440. finished,
  441. onLoad,
  442. //籍贯
  443. nativePlace,
  444. hs_nativePlace,
  445. getnativePlace,
  446. customFieldName,
  447. //现居地
  448. options,
  449. placeAddress,
  450. showPlace1,
  451. getPlace1,
  452. //图片上传
  453. fileList,
  454. chooseImg,
  455. //图片删除
  456. deleteRead,
  457. //校验
  458. failed,
  459. //数据提交
  460. submit,
  461. };
  462. },
  463. };
  464. </script>
  465. <style lang="less">
  466. .dialog {
  467. width: 100%;
  468. height: 400px;
  469. overflow: auto;
  470. }
  471. </style>