123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476 |
- <template>
- <van-nav-bar
- fixed
- title="牌位详细信息"
- left-arrow
- @click-left="onClickLeft"
- :style="{ 'background-color': selectColor }"
- />
- <div class="main">
- <div class="banner">
- <img src="../../../../public/loginbg/banner.jpg" alt="" />
- </div>
- <div class="info">
- <van-form @submit="submit" @failed="failed" show-error :show-error-message="false">
- <p class="miniTitle">牌位信息-{{ dataitem.brandName }}</p>
- <van-cell-group>
- <van-field
- v-model="dataitem.brandName"
- center
- required
- :rules="[{ required: true }]"
- label="牌位名称:"
- placeholder="请填写牌位名称"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="locationName"
- readonly
- required
- :rules="[{ required: true }]"
- label="所属场所:"
- placeholder="请选择所属场所"
- input-align="right"
- right-icon="arrow-down"
- @click="hs_site = true"
- >
- </van-field>
- <van-dialog v-model:show="hs_site" title="所属场所" show-cancel-button>
- <div class="dialog">
- <van-list
- v-model:loading="loading"
- :finished="finished"
- finished-text="没有更多了"
- @load="onLoad"
- >
- <van-radio-group v-model="checked">
- <van-cell-group inset>
- <van-cell
- v-for="item in sitelist"
- :key="item"
- :title="item.name"
- clickable
- @click="getsite(item)"
- >
- <template #right-icon>
- <van-radio :name="item.id" @click="getsite(item)"/>
- </template>
- </van-cell>
- </van-cell-group>
- </van-radio-group>
- </van-list>
- </div>
- </van-dialog>
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.siteContact"
- center
- disabled
- label="场所联系人:"
- placeholder="请填写场所联系人"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.contactInformation"
- center
- disabled
- label="联系方式:"
- placeholder="请填写联系方式"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.memorialTabletHolder"
- center
- label="供奉牌位人:"
- placeholder="请填写供奉牌位人"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.memorialTabletHolderPhone"
- center
- label-width="8em"
- label="供奉牌位人电话:"
- placeholder="请填写供奉牌位人电话"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.udCard"
- center
- label="身份证号:"
- placeholder="请填写身份证号"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.nativePlace"
- readonly
- label="籍贯:"
- placeholder="请选择籍贯地区"
- input-align="right"
- right-icon="arrow-down"
- @click="hs_nativePlace = true"
- />
- <van-popup v-model:show="hs_nativePlace" round position="bottom">
- <van-picker
- title="籍贯"
- :columns="nativePlace"
- :columns-field-names="customFieldName"
- @cancel="hs_nativePlace = false"
- @confirm="getnativePlace"
- />
- </van-popup>
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.currentResidence"
- center
- readonly
- label="现居地:"
- placeholder="请填写现居地"
- input-align="right"
- right-icon="arrow-down"
- @click="showPlace1 = true"
- />
- <van-popup v-model:show="showPlace1" round position="bottom">
- <van-picker
- title="现居地选择"
- :columns="options"
- :columns-field-names="customFieldName"
- @cancel="showPlace1 = false"
- @confirm="getPlace1"
- />
- </van-popup>
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.currentResidenceDel"
- center
- label="现居地详情:"
- placeholder="请填写现居地详情"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.relationship"
- center
- label-width="8em"
- label="与供奉牌位关系:"
- placeholder="请填写与供奉牌位关系"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.sacrificeExpenses"
- center
- label-width="10em"
- label="供奉费用(元/年):"
- placeholder="请填写供奉费用"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.position"
- center
- label="牌位位置:"
- placeholder="请填写牌位位置"
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field
- v-model="dataitem.information"
- rows="2"
- autosize
- label-width="8em"
- label="被供奉者信息:"
- type="textarea"
- maxlength="50"
- placeholder="请填写被供奉者信息"
- show-word-limit
- input-align="right"
- />
- </van-cell-group>
- <van-cell-group>
- <van-field name="uploader" label-align="top" label="牌位照片:">
- <template #input>
- <van-uploader
- readonly
- v-model="fileList"
- :max-count="5"
- accept=""
- :preview-full-image="false"
- :before-delete="deleteRead"
- @click-upload="chooseImg"
- >
- </van-uploader>
- </template>
- </van-field>
- </van-cell-group>
- <div class="subbtn">
- <van-button type="primary" native-type="submit">确认修改</van-button>
- <van-button @click="onClickLeft" type="default" hairline
- >取消</van-button
- >
- </div>
- </van-form>
- </div>
- </div>
- </template>
- <script>
- import { useRouter } from "vue-router";
- import { onMounted, ref } from "vue";
- import { useStore } from "vuex";
- import $base from "@/utils/config";
- import tools from "@/api/sys/tools";
- import placePerson from "@/api/placePerson/placePerson";
- import TabletServer from "@/api/tabletManage/TabletServer";
- import PlaceRegister from "@/api/placeRegister/placeRegister";
- export default {
- setup() {
- const store = useStore();
- // 导航栏颜色
- const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
- //牌位数据
- let dataitem = ref({});
- //数据接收
- const router = useRouter();
- onMounted(() => {
- var id = JSON.parse(router.currentRoute.value.query.id);
- new TabletServer().queryById(id).then((res) => {
- dataitem.value = res;
- dataitem.value.pic.split("|").forEach((item) => {
- if (item.trim().length > 0) {
- fileImg.value.push({
- name: decodeURIComponent(
- item.substring(item.lastIndexOf("/") + 1)
- ),
- url: $base +"/"+ item.replace("程序附件//", "程序附件/"),
- id: item.replace("程序附件//", "程序附件/"),
- });
- fileList.value.push({
- name: decodeURIComponent(
- item.substring(item.lastIndexOf("/") + 1)
- ),
- url: $base +"/"+ item.replace("程序附件//", "程序附件/"),
- id: item.replace("程序附件//", "程序附件/"),
- });
- }
- });
- let addressid = dataitem.value.siteName.id;
- new PlaceRegister().queryById(addressid).then((res) => {
- locationName.value = res.name;
- });
- });
- //籍贯接口
- new placePerson().nativePlace().then((res) => {
- nativePlace.value.push(...res);
- options.value.push(...res);
- });
- });
- // 所属场所
- const locationName = ref("");
- const checked = ref("");
- const sitelist = ref([]);
- let hs_site = ref(false);
- const getsite = (val) => {
- locationName.value = val.name;
- const json = Object.assign(dataitem.value, {
- siteName: { id: val.id, name: val.name },
- siteContact: val.contact,
- contactInformation: val.contactNumber,
- });
- dataitem.value = json;
- checked.value = val.id;
- };
- const loading = ref(false);
- const finished = ref(false);
- let index = 0;
- const onLoad = () => {
- loading.value = true;
- finished.value = false;
- // 异步更新数据
- new PlaceRegister()
- .religiousList({
- current: index + 1,
- size: 10,
- })
- .then(({ records, pages }) => {
- sitelist.value = sitelist.value.concat(records);
- // 加载状态结束
- loading.value = false;
- if (index + 1 >= pages) {
- finished.value = true;
- }
- index++;
- });
- };
- //籍贯
- const customFieldName = {
- text: "name",
- value: "id",
- };
- const options = ref([]);
- const nativePlace = ref([]);
- let hs_nativePlace = ref(false);
- const getnativePlace = ({ selectedOptions }) => {
- hs_nativePlace.value = false;
- let str = "";
- selectedOptions.forEach((item) => {
- if (dataitem.nativePlace) {
- str = dataitem.nativePlace;
- }
- str += item.name + "/";
- });
- dataitem.nativePlace = str;
- const json = Object.assign(dataitem.value, { nativePlace: str });
- dataitem.value = json;
- };
- //现居地
- let placeAddress = ref("");
- let showPlace1 = ref(false);
- const getPlace1 = ({ selectedOptions }) => {
- showPlace1.value = false;
- let str1 = "";
- selectedOptions.forEach((item) => {
- if (dataitem.currentResidence) {
- str1 = dataitem.currentResidence;
- }
- str1 += item.name + "/";
- });
- const json = Object.assign(dataitem.value, {
- currentResidence: str1,
- });
- dataitem.value = json;
- };
- //图片上传
- let fileList = ref([]);
- let fileImg = ref([]);
- const chooseImg = () => {
- if (store.state.pctoken != "") {
- xm.chooseFile({
- count: 1,
- name: "file",
- url:
- $base +
- `/sys/file/webupload/upload?uploadPath=placememorialtablets/placeMemorialTablets`,
- headers: {
- "Content-Type": "multipart/form-data",
- "token": store.state.pctoken,
- },
- }).then((res) => {
- let data = res[0].data;
- data.name = decodeURIComponent(
- data.id.substring(data.url.lastIndexOf("/") + 1)
- );
- data.url = $base + data.url;
- fileImg.value.push(data);
- fileList.value.push(data);
- });
- }
- };
- // 删除文件
- const deleteRead = (file) => {
- //删除文件操作
- for (let index = 0; index < fileList.value.length; index++) {
- if (file.id == fileList.value[index].id) {
- fileList.value.splice(index, 1);
- if (fileImg.value[index]) {
- let delurl = fileImg.value[index].url;
- new tools().uploadFiledelete("", delurl).then(({ data }) => {});
- fileImg.value.splice(index, 1);
- }
- }
- }
- };
- //返回
- const onClickLeft = () => {
- history.back();
- };
- //校验
- const failed = () => {
- xm.showToast({
- message: "请检查表单必填项是否存在填写遗漏!",
- });
- };
- //数据提交
- const submit = () => {
- dataitem.value.pic = fileImg.value.map((option) => option.id).join("|");
- new TabletServer().save(dataitem.value).then((res) => {
- if (res.status == 200) {
- xm.showToast({
- message: "牌位信息修改成功",
- });
- router.push({
- path: "/placeTablet",
- });
- }else{
- xm.showToast({
- message: "牌位信息修改失败",
- });
- console.log(res);
- }
- });
- };
- return {
- onClickLeft,
- dataitem,
- selectColor,
- //所属场所
- locationName,
- checked,
- hs_site,
- getsite,
- sitelist,
- loading,
- finished,
- onLoad,
- //籍贯
- nativePlace,
- hs_nativePlace,
- getnativePlace,
- customFieldName,
- //现居地
- options,
- placeAddress,
- showPlace1,
- getPlace1,
- //图片上传
- fileList,
- chooseImg,
- //图片删除
- deleteRead,
- //校验
- failed,
- //数据提交
- submit,
- };
- },
- };
- </script>
- <style lang="less">
- .dialog {
- width: 100%;
- height: 400px;
- overflow: auto;
- }
- </style>
|