牌位新增页面

src/views/placeManage/placeTablet/placeTabletAdd.vue

@@ -0,0 +1,445 @@
+<template>
+  <van-nav-bar
+    fixed
+    title="牌位信息录入"
+    left-arrow
+    @click-left="onClickLeft"
+    :style="{ 'background-color': selectColor }"
+  />
+  <div class="main">
+    <van-cell-group>
+      <van-field
+        v-model="inputForm.brandName"
+        center
+        required
+        label="牌位名称:"
+        placeholder="请填写证件号码"
+        input-align="right"
+      />
+    </van-cell-group>
+    <van-cell-group>
+      <van-field
+        v-model="locationName"
+        readonly
+        required
+        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
+        required
+        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
+            v-model="fileList"
+            :after-read="afterRead1"
+            :max-count="6"
+            capture="camera"
+            accept=""
+            :before-delete="fjdelete"
+          >
+          </van-uploader>
+        </template>
+      </van-field>
+    </van-cell-group>
+    <div class="subbtn">
+      <van-button type="primary" @click="submit">提交</van-button>
+      <van-button @click="onClickLeft" type="default" hairline>取消</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+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";
+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().nation().then((res) => {
+        res.forEach((item) => {
+          nation.value.push({
+            text: item.label,
+            value: item.value,
+          });
+        });
+      });
+      //籍贯接口
+      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([]);
+    let workpic = ref("");
+    const afterRead1 = (file) => {
+      new tools()
+        .uploadFile(file, `sys/file/webupload/upload`)
+        .then(({ data }) => {
+          data.name = decodeURIComponent(
+            data.url.substring(data.url.lastIndexOf("/") + 1)
+          );
+          workpic.value += "" + data.url;
+          const json = Object.assign(inputForm.value, {
+            pic: workpic.value,
+          });
+          inputForm.value = json;
+          fileImg.value.push(data);
+        });
+    };
+    const fjdelete = (file) => {
+      //删除文件操作
+      for (let index = 0; index < fileList.value.length; index++) {
+        if (file.file == fileList.value[index].file) {
+          let delurl = fileImg.value[index].url;
+          new tools().uploadFiledelete("", delurl).then(({ data }) => {});
+          fileImg.value.splice(index, 1);
+          fileList.value.splice(index, 1);
+        }
+      }
+    };
+    //数据提交
+    const submit = () => {
+      new TabletServer().save(inputForm.value).then((res) => {
+        console.log(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,
+      afterRead1,
+      //图片删除
+      fjdelete,
+      submit
+    };
+  },
+};
+</script>
+
+<style>
+.dialog {
+  width: 100%;
+  height: 400px;
+  overflow: auto;
+}
+.subbtn {
+  margin: 20px;
+  text-align: center;
+}
+.subbtn .van-button {
+  width: 40%;
+  margin: 5px;
+}
+</style>