HS_MZAP/src/views/placeManage/placeTablet/placeTabletAdd.vue

<template>
  <van-nav-bar
    fixed
    title="牌位信息录入"
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <div class="main">
    <van-form @submit="submit" show-error :show-error-message="false">
    <van-cell-group>
      <van-field
        v-model="inputForm.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" />
                  </template>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </van-list>
        </div>
      </van-dialog>
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.siteContact"
        center
        disabled
        label="场所联系人:"
        placeholder="请填写场所联系人"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.contactInformation"
        center
        disabled
        label="联系方式:"
        placeholder="请填写联系方式"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.memorialTabletHolder"
        center
        label="供奉牌位人:"
        placeholder="请填写供奉牌位人"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.memorialTabletHolderPhone"
        center
        label-width="8em"
        label="供奉牌位人电话:"
        placeholder="请填写供奉牌位人电话"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.udCard"
        center
        label="身份证号:"
        placeholder="请填写身份证号"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.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="inputForm.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="inputForm.currentResidenceDel"
        center
        label="现居地详情:"
        placeholder="请填写现居地详情"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.relationship"
        center
        label-width="8em"
        label="与供奉牌位关系:"
        placeholder="请填写与供奉牌位关系"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.sacrificeExpenses"
        center
        label-width="10em"
        label="供奉费用（元/年）:"
        placeholder="请填写供奉费用"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.position"
        center
        label="牌位位置:"
        placeholder="请填写牌位位置"
        input-align="right"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="inputForm.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>
</template>

<script>
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import TabletServer from "@/api/tabletManage/TabletServer";
import placePerson from "@/api/placePerson/placePerson";
import PlaceRegister from "@/api/placeRegister/placeRegister";
import tools from "@/api/sys/tools";
import $base from "@/utils/config";
export default {
  setup() {
    const onClickLeft = () => {
      history.back();
    };
    const inputForm = ref({
      id: "",
      brandName: "",
      siteName: {
        id: "",
      },
      siteContact: "",
      contactInformation: "",
      memorialTabletHolder: "",
      memorialTabletHolderPhone: "",
      udCard: "",
      nativePlace: "",
      currentResidence: "",
      currentResidenceDel: "",
      relationship: "",
      sacrificeExpenses: "",
      position: "",
      state: "0",
      keepOnRecord: "0",
      pic: "",
      information: "",
    });
    onMounted(() => {
      //籍贯接口
      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(inputForm.value, {
        siteName: { id: val.id },
        siteContact: val.contact,
        contactInformation: val.contactNumber,
      });
      inputForm.value = json;
      checked.value = val.id;
    };
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = 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 (inputForm.nativePlace) {
          str = inputForm.nativePlace;
        }
        str += item.name + "/";
      });
      inputForm.nativePlace = str;
      const json = Object.assign(inputForm.value, { nativePlace: str });
      inputForm.value = json;
    };
    //现居地
    let placeAddress = ref("");
    let showPlace1 = ref(false);
    const getPlace1 = ({ selectedOptions }) => {
      showPlace1.value = false;
      let str1 = "";
      selectedOptions.forEach((item) => {
        if (inputForm.currentResidence) {
          str1 = inputForm.currentResidence;
        }
        str1 += item.name + "/";
      });
      const json = Object.assign(inputForm.value, {
        currentResidence: str1,
      });
      inputForm.value = json;
    };
    //图片上传
    let fileList = ref([]);
    let fileImg = ref([]);
    const chooseImg = () => {
      xm.chooseFile({
        count: 1,
        name: "file",
        url: $base + `/sys/file/webupload/upload?uploadPath=placememorialtablets/placeMemorialTablets`,
        headers: { 'Content-Type': 'multipart/form-data', "token": window.localStorage.getItem('MZ_TOKEN') },
      }).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 router = useRouter();
    //数据提交
    const submit = () => {
      inputForm.value.pic = fileImg.value
        .map((option) => option.id)
        .join("|");
      new TabletServer().save(inputForm.value).then((res) => {
        if (res.status == 200) {
          
          xm.showToast({
            message: "牌位信息添加成功",
          });
          router.push({
            path: "/placeTablet",
          });
        }else{
          xm.showToast({
            message: "牌位信息添加失败",
          });
          console.log(res);
        }
      });
    };
    return {
      inputForm,
      onClickLeft,
      //所属场所
      locationName,
      checked,
      hs_site,
      getsite,
      sitelist,
      loading,
      finished,
      onLoad,
      refreshing,
      //籍贯
      nativePlace,
      hs_nativePlace,
      getnativePlace,
      customFieldName,
      //现居地
      options,
      placeAddress,
      showPlace1,
      getPlace1,
      //图片上传
      fileList,
      chooseImg,
      //图片删除
      deleteRead,
      submit
    };
  },
};
</script>

<style>
.dialog {
  width: 100%;
  height: 400px;
  overflow: auto;
}
.subbtn {
  margin: 20px;
  text-align: center;
}
.subbtn .van-button {
  width: 40%;
  margin: 5px;
}
</style>