人员档案详情修改功能以及牌位详情修改部分改动

src/api/tabletManage/TabletServer.js

@@ -14,4 +14,10 @@ export default class TabletServer {
             inputForm
         )
     };
+    // 提交
+    queryById(id) {
+        return request.get(
+            `/placememorialtablets/placeMemorialTablets/queryById`, { id: id }
+        )
+    };
 }

src/views/placeManage/placePerson/placePersoninfo.vue

@@ -14,20 +14,15 @@
       <p class="miniTitle">个人信息-{{ data.name }}</p>
       <van-row justify="space-between">
         <van-col span="14">
-          <van-row class="item">
-            <van-col span="24">
-              <van-row justify="space-between">
-                <van-field
-                  v-model="data.name"
-                  center
-                  readonly
-                  clearable
-                  label="姓名:"
-                  input-align="right"
-                />
-              </van-row>
-            </van-col>
-          </van-row>
+          <van-cell-group>
+            <van-field
+              v-model="data.name"
+              center
+              clearable
+              label="姓名:"
+              input-align="right"
+            />
+          </van-cell-group>
           <van-row class="item">
             <van-col span="24">
               <van-row justify="space-between">
@@ -47,27 +42,28 @@
               </van-row>
             </van-col>
           </van-row>
-          <van-row class="item">
-            <van-col span="24">
-              <van-row justify="space-between">
-                <van-field
-                  v-model="data.idType"
-                  center
-                  readonly
-                  clearable
-                  label="证件类型:"
-                  input-align="right"
-                >
-                  <template #input>
-                    <template v-if="data.idType == 1">身份证</template>
-                    <template v-if="data.idType == 2">护照</template>
-                    <template v-if="data.idType == 3">港澳通行证</template>
-                    <template v-if="data.idType == 4">其他</template>
-                  </template>
-                </van-field>
-              </van-row>
-            </van-col>
-          </van-row>
+          <van-cell-group>
+            <van-field
+              v-model="idTypeName"
+              readonly
+              required
+              label="证件类型:"
+              name="validator"
+              placeholder="请选择证件类型"
+              input-align="right"
+              right-icon="arrow-down"
+              @click="showPicker = true"
+              :rules="[{ validator, message: '证件类型不能为空' }]"
+            />
+            <van-popup v-model:show="showPicker" round position="bottom">
+              <van-picker
+                title="证件类型"
+                :columns="places"
+                @cancel="showPicker = false"
+                @confirm="getPlace"
+              />
+            </van-popup>
+          </van-cell-group>
         </van-col>
         <van-col span="8">
           <van-image width="100" height="100" :src="data.workPicture" />
@@ -221,14 +217,17 @@
         </van-col>
       </van-row>
       <p class="miniTitle">拓展信息</p>
-        <van-row class="item" v-for="(item, index) in expansion" :key="index">
-          <van-col span="24">
-            <van-row justify="space-between" style="padding: 10px;font-size: 12px;">
-              <span style="font-weight: 700;">{{ item.chineseName }}</span>
-              <span>{{ getValue(item) }}</span>
-            </van-row>
-          </van-col>
-        </van-row>
+      <van-row class="item" v-for="(item, index) in expansion" :key="index">
+        <van-col span="24">
+          <van-row
+            justify="space-between"
+            style="padding: 10px; font-size: 12px"
+          >
+            <span style="font-weight: 700">{{ item.chineseName }}</span>
+            <span>{{ getValue(item) }}</span>
+          </van-row>
+        </van-col>
+      </van-row>
     </div>
   </div>
 </template>
@@ -253,8 +252,8 @@ export default {
       new UserManage().queryById(id).then((res) => {
         expansion.value = res.userManagenmetDetailsDTOList;
       });
+      idTypeName.value = getidCardType(item.idType)
     });
-
     const getValue = (item) => {
       if (item.chineseName === "教职身份") {
         const type = {
@@ -286,7 +285,32 @@ export default {
       }
       return item.value;
     };
-
+    // 证件类型
+    const places = [
+      { text: "身份证", value: " 1" },
+      { text: "护照", value: "2" },
+      { text: "港澳通行证", value: "3" },
+      { text: "其他", value: "4" },
+    ];
+    const idTypeName = ref("");
+    let showPicker = ref(false);
+    const getPlace = ({ selectedOptions }) => {
+      showPicker.value = false;
+      const json = Object.assign(data.value, {
+        idType: selectedOptions[0].value,
+      });
+      data.value = json;
+      idTypeName.value = selectedOptions[0].text;
+    };
+    const getidCardType = (item)=>{
+      const type = {
+          1: "身份证",
+          2: "护照",
+          3: "港澳通行证",
+          4: "其他",
+        };
+        return type[item];
+    }
     //返回
     const onClickLeft = () => {
       history.back();
@@ -297,6 +321,11 @@ export default {
       selectColor,
       expansion,
       getValue,
+      // 证件类型
+      idTypeName,
+      showPicker,
+      places,
+      getPlace,
     };
   },
 };

src/views/placeManage/placeTablet/placeTabletAdd.vue

@@ -199,7 +199,7 @@
       />
     </van-cell-group>
     <van-cell-group>
-      <van-field name="uploader" label-align="top" label="工作照片:">
+      <van-field name="uploader" label-align="top" label="牌位照片:">
         <template #input>
           <van-uploader
             v-model="fileList"
@@ -372,14 +372,14 @@ export default {
         console.log(res);
         if (res.status == 200) {
           xm.showToast({
-            message: "人员添加成功",
+            message: "牌位信息添加成功",
           });
           router.push({
             path: "/placeTablet",
           });
         }else{
           xm.showToast({
-            message: "人员添加失败",
+            message: "牌位信息添加失败",
           });
           console.log(res);
         }

src/views/placeManage/placeTablet/placeTabletInfo.vue

@@ -12,226 +12,232 @@
     </div>
     <div class="info">
       <p class="miniTitle">牌位信息-{{ dataitem.brandName }}</p>
-      <van-row justify="space-between">
-        <van-col span="24">
-          <van-row class="item">
-            <van-col span="24">
-              <van-row justify="space-between">
-                <van-field
-                  v-model="dataitem.brandName"
-                  center
-                  readonly
-                  clearable
-                  label="名称:"
-                  input-align="right"
-                />
-              </van-row>
-            </van-col>
-          </van-row>
-          <van-row class="item">
-            <van-col span="24">
-              <van-row justify="space-between">
-                <van-field
-                  v-model="data.siteName.name"
-                  center
-                  readonly
-                  clearable
-                  label="场所名称:"
-                  input-align="right"
-                />
-              </van-row>
-            </van-col>
-          </van-row>
-          <van-row class="item">
-            <van-col span="24">
-              <van-row justify="space-between">
-                <van-field
-                  v-model="dataitem.siteContact"
-                  center
-                  readonly
-                  clearable
-                  label="场所联系人:"
-                  input-align="right"
-                />
-              </van-row>
-            </van-col>
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.contactInformation"
-              center
-              readonly
-              clearable
-              label="联系方式:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.memorialTabletHolder"
-              center
-              readonly
-              clearable
-              label="供奉牌位人:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.memorialTabletHolderPhone"
-              center
-              readonly
-              clearable
-              label="牌位人电话:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.udCard"
-              center
-              readonly
-              clearable
-              label="身份证号:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.currentResidence"
-              center
-              readonly
-              clearable
-              label="籍贯:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.nativePlace"
-              center
-              readonly
-              clearable
-              label="现居地:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.currentResidenceDel"
-              center
-              readonly
-              clearable
-              label="现居地详情:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.relationship"
-              center
-              readonly
-              label-width = '8em'
-              clearable
-              label="与供奉牌位关系:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.sacrificeExpenses"
-              center
-              readonly
-              clearable
-              label-width = '8em'
-              label="供奉费用(元/年):"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row justify="space-between">
-            <van-field
-              v-model="dataitem.information"
-              center
-              readonly
-              clearable
-              label-width = '8em'
-              label="被供奉者信息:"
-              input-align="right"
-            />
-          </van-row>
-        </van-col>
-      </van-row>
-      <van-row class="item">
-        <van-col span="24">
-          <van-row>
-            <van-field
-                  center
-                  readonly
-                  clearable
-                  label="牌位照片："
-                  label-align="top"
-                >
-                  <template #input>
-                    <van-image v-for="(item, index) in data.pic" :key="index" width="100" height="100" :src="item" />
-                  </template>
-                </van-field>
-          </van-row>
-        </van-col>
-      </van-row>
+      <van-cell-group>
+        <van-field
+          v-model="dataitem.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="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
+          required
+          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
+              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>
   </div>
 </template>
 
 <script>
 import { useRouter } from "vue-router";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
 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 data = reactive({
-      siteName: {},
-      pic: [],
-    });
     // 导航栏颜色
     const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
     //牌位数据
@@ -241,32 +247,210 @@ export default {
     onMounted(() => {
       var item = JSON.parse(router.currentRoute.value.query.data);
       dataitem.value = item;
-      data.siteName = dataitem.value.siteName;
-      let pic = [];
-      pic = dataitem.value.pic.split("|");
-      dataitem.value.pic = pic;
-      data.pic = dataitem.value.pic;
-      let picList = [];
-      data.pic.forEach((item1) => {
-        // item1 = `${$base}`+item1
-        picList.push(`${$base}` + item1);
+      if (!dataitem.value.pic) {
+        fileList.value = [];
+      } else {
+        // 有数据处理 dataitem.value.pic
+        let pic = dataitem.value.pic;
+        let array = pic.split("|");
+        array.forEach((item) => {
+          if (item.trim().length > 0) {
+            fileList.value.push({
+              file: {
+                name: decodeURIComponent(
+                  item.substring(item.lastIndexOf("/") + 1)
+                ),
+                url: $base + item
+              },
+            });
+          }
+          fileImg.value.push({
+            name: decodeURIComponent(item.substring(item.lastIndexOf("/") + 1)),
+            url: item,
+          });
+        });
+      }
+      let id = dataitem.value.siteName.id;
+      new PlaceRegister().queryById(id).then((res) => {
+        locationName.value = res.name;
+      });
+      //籍贯接口
+      new placePerson().nativePlace().then((res) => {
+        nativePlace.value.push(...res);
+        options.value.push(...res);
       });
-      data.pic = picList;
-      // console.log(data.pic);
     });
+    // 所属场所
+    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([]);
+    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(dataitem.value, {
+            pic: workpic.value,
+          });
+          dataitem.value = json;
+          fileImg.value.push(data);
+        });
+    };
+    const fjdelete = (file) => {
+      console.log(fileList.value,'++++++++++++++++++>fileList.value');
+      //删除文件操作
+      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 onClickLeft = () => {
       history.back();
     };
+    //数据提交
+    const submit = () => {
+      new TabletServer().save(dataitem.value).then((res) => {
+        console.log(dataitem.value,'===========================>dataitem.value');
+        console.log(res, "===========================>res");
+        // if (res.status == 200) {
+        //   xm.showToast({
+        //     message: "牌位信息修改成功",
+        //   });
+        //   router.push({
+        //     path: "/placeTablet",
+        //   });
+        // }else{
+        //   xm.showToast({
+        //     message: "牌位信息修改失败",
+        //   });
+        //   console.log(res);
+        // }
+      });
+    };
     return {
       onClickLeft,
-      data,
       dataitem,
       selectColor,
+      //所属场所
+      locationName,
+      checked,
+      hs_site,
+      getsite,
+      sitelist,
+      loading,
+      finished,
+      onLoad,
+      //籍贯
+      nativePlace,
+      hs_nativePlace,
+      getnativePlace,
+      customFieldName,
+      //现居地
+      options,
+      placeAddress,
+      showPlace1,
+      getPlace1,
+      //图片上传
+      fileList,
+      afterRead1,
+      //图片删除
+      fjdelete,
+      //数据提交
+      submit,
     };
   },
 };
 </script>
 
 <style lang="less">
+.dialog {
+  width: 100%;
+  height: 400px;
+  overflow: auto;
+}
 </style>