三防 个人信息

src/components/RegionSelect/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <van-popup v-model:show="show" destroy-on-close round position="bottom" style="height:80%">
+    <div class="popup-header">
+      <div class="btn-text1" @click="onCancel">取消</div>
+      <div class="popup-title">请选择</div>
+      <div class="btn-text2" @click="onConfirm">确定</div>
+    </div>
+    <van-steps direction="vertical" :active="activeTab">
+      <van-step v-for="(item, index) in steps" :key="index" @click="handleClickStep(index + 1)">{{item}}</van-step>
+    </van-steps>
+    <div v-show="!!currentValue" class="sub-text">备注：如果您直属【{{ currentValue }}】,请直接点击右上角“确定”完成。</div>
+    <div v-show="activeTab === 1" class="select-list">
+      <div v-for="(item, index) in region" :key="index" class="select-item" @click="handleSelect1(item)">{{ item.label }}</div>
+    </div>
+    <div v-show="activeTab === 2" class="select-list">
+      <div v-for="(item, index) in townList" :key="index" class="select-item" @click="handleSelect2(item)">{{ item.text }}</div>
+    </div>
+    <div v-show="activeTab === 3" class="select-list">
+      <div v-for="(item, index) in villageList" :key="index" class="select-item" @click="handleSelect3(item)">{{ item.text }}</div>
+    </div>
+  </van-popup>
+</template>
+
+<script lang="ts" setup name="RegionSelect">
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const props = defineProps({
+  modelValue: Boolean
+});
+
+const emits = defineEmits(['update:modelValue','confirm']);
+const customFieldName = {
+  text: 'label',
+  value: 'value',
+  children: 'cities',
+};
+let show = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits('update:modelValue', value);
+  }
+})
+
+let area = ref('');
+let areaText = ref('');
+const { region } = toRefs<any>(proxy?.useDict('region'));
+const handleSelect1 = (item) => {
+  area.value = item.value;
+  areaText.value = item.label;
+  activeTab.value = 2
+}
+
+let town = ref('');
+let townText = ref('');
+let townList = ref([
+  { text: '', value: '' },
+  { text: '鳌头镇', value: '1' },
+  { text: '羊角镇', value: '2' },
+  { text: '金塘镇', value: '3' }
+]);
+const handleSelect2 = (item) => {
+  town.value = item.value;
+  townText.value = item.text;
+  activeTab.value = 3
+}
+let village = ref('');
+let villageText = ref('');
+let villageList = ref([
+  { text: '红花村', value: '1' },
+  { text: '低山村', value: '2' },
+  { text: '旦场居委会', value: '3' }
+]);
+const handleSelect3 = (item) => {
+  village.value = item.value;
+  villageText.value = item.text;
+}
+
+let activeTab = ref(1);
+let steps = computed(() => {
+  let arr = ['茂名市'];
+  arr.push(areaText.value ? areaText.value : '请选择所属区/县');
+  if (areaText.value) {
+    arr.push(townText.value ? townText.value : '请选择所属镇/街道');
+  }
+  if (townText.value) {
+    arr.push(villageText.value ? villageText.value : '请选择所属社区/村居');
+  }
+  return arr;
+});
+let currentValue = computed(() => {
+  let result = '茂名市';
+  if (area.value && town.value && village.value) {
+    result = villageText.value;
+  } else if (area.value && town.value) {
+    result = townText.value;
+  } else if (area.value) {
+    result = areaText.value;
+  }
+  return result;
+});
+
+// 点击步骤
+const handleClickStep = (index) => {
+  if (activeTab.value <= index) return;
+  if ([0, 1, 2].includes(index)) {
+    village.value = '';
+    villageText.value = '';
+    if ([0, 1].includes(index)) {
+      town.value = '';
+      townText.value = '';
+      if (activeTab.value === 0) {
+        area.value = '';
+        areaText.value = '';
+      }
+    }
+  }
+}
+const onCancel = () => {
+  emits('update:modelValue', false)
+}
+const onConfirm = () => {
+  let label = '茂名市';
+  let value = '';
+  if (area.value && town.value && village.value) {
+    label = villageText.value;
+    value = village.value;
+  } else if (area.value && town.value) {
+    label = townText.value;
+    value = town.value;
+  } else if (area.value) {
+    label = areaText.value;
+    value = area.value;
+  }
+  onCancel();
+  emits('confirm',{
+    label: label,
+    value: value
+  })
+};
+const option1 = ref([
+
+]);
+</script>
+
+<style lang="scss" scoped>
+.popup-header {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .btn-text1 {
+    padding: 0 16px;
+    font-size: 14px;
+    color: #969799;
+  }
+  .popup-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #323233;
+  }
+  .btn-text2 {
+    padding: 0 16px;
+    font-size: 14px;
+    color: #1989fa;
+  }
+}
+.sub-text {
+  padding: 0 12px;
+  font-size: 14px;
+  color: #A3A7AD;
+}
+.select-list {
+  padding: 0 18px;
+  font-size: 14px;
+  color: #414F64;
+  .select-item {
+    padding: 5px 0;
+  }
+}
+:deep(.van-step__circle) {
+  width: 8px;
+  height: 8px;
+  border: 1px solid #1989fa;
+}
+:deep(.van-step__icon--active) {
+  width: 8px;
+  height: 8px;
+  border: 1px solid #969799;
+  border-radius: 50%;
+  &:before {
+    content: '';
+  }
+}
+:deep(.van-step__circle-container) {
+  width: 8px;
+  height: 8px;
+}
+:deep(.van-step__line) {
+  height: calc(100% - 8px);
+  top: 23px;
+  left: -15.5px;
+}
+</style>
+

src/router/routes.ts

@@ -469,6 +469,18 @@ export const leaderRoute: Array<RouteRecordRaw> = [
           title: "个人信息",
           noCache: true
         }
+      },
+      {
+        path: "editPersonInformation",
+        name: "EditPersonInformation",
+        component: () =>
+            import(
+                "@/views/threePreventionResponsiblePerson/editPersonInformation.vue"
+                ),
+        meta: {
+          title: "责任信息",
+          noCache: true
+        }
       }
     ]
   }

src/styles/index.less

@@ -215,6 +215,7 @@ a:hover {
     position: fixed;
     left: 0;
     bottom: 0;
+    z-index: 10;
     width: 100%;
     height: 81px;
     background: #FFFFFF;

src/views/event/StartEventDialog.vue

@@ -8,7 +8,7 @@
             <van-field
                 v-model="form.event_title"
                 label="事件名称"
-                readonly 
+                readonly
                 :rules="[{ required: true, message: '请填写事件名称'  }]"
             />
             <van-field
@@ -26,10 +26,10 @@
             <div style="display: flex;        flex-direction: row;  justify-content: space-between;">
                 <van-button @click="closeDialog(false)" style="margin-right:10px;">取 消</van-button>
                 <van-button type="primary" native-type="submit">确 定</van-button>
-                
+
             </div>
         </div>
-    </van-form>    
+    </van-form>
 </van-popup>
 
 <van-popup v-model:show="show_event_level_picker" round position="bottom">
@@ -43,7 +43,6 @@
 </template>
 
 <script lang="ts" setup>
-import {getCurrentInstance, reactive, ref, toRefs, watch, defineEmits} from 'vue';
 import { startEvent } from "@/api/event";
 
 const proxy = getCurrentInstance()?.proxy;
@@ -130,4 +129,4 @@ const closeDialog = (t) => {
     font-weight: 600;
     line-height: 6.0vmin;
 }
-</style>
+</style>

src/views/mobileControl/TaskProgressUpdate.vue

@@ -16,7 +16,7 @@
                 :right-icon="selectIcon"
                 readonly
                 label="任务完成情况"
-                placeholder="请输入任务完成情况"
+                placeholder="请选择任务完成情况"
                 :rules="rules.processing_status"
                 @click="showPicker = true"
             />
@@ -75,7 +75,6 @@
 
 <script lang="ts" setup name="TaskProgressUpdate">
 import {useRoute, useRouter} from "vue-router";
-import {reactive, ref} from "vue";
 import {showSuccessToast} from "vant";
 import selectIcon from  "@/assets/images/selectIcon.png";
 import {Numeric} from "vant/es/utils";

src/views/threePreventionResponsiblePerson/editPersonInformation.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="common-form-container">
+    <van-form @submit="onSubmit">
+      <div class="form-item">
+        <div class="common-form-content">
+          <div class="common-form-item">
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-name" />
+                <div>姓名:</div>
+              </div>
+              <van-field
+                  v-model="form.name"
+                  class="common-field"
+                  placeholder="请输入姓名"
+                  :rules="rules.name"
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-phone" />
+                <div>手机号码:</div>
+              </div>
+              <van-field
+                  v-model="form.phone"
+                  class="common-field"
+                  placeholder="请输入手机号码"
+                  :rules="rules.phone"
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-area" />
+                <div>行政区划:</div>
+              </div>
+              <van-field
+                  v-model="areaText"
+                  class="common-field"
+                  placeholder="请选择行政区划"
+                  :rules="rules.area"
+                  :right-icon="selectIcon"
+                  readonly
+                  @click="showPicker = true"
+              />
+              <RegionSelect v-model="showPicker" @confirm="handleSelect" />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-dept" />
+                <div>所属单位:</div>
+              </div>
+              <van-field
+                  v-model="form.dept"
+                  class="common-field"
+                  placeholder="请输入所属单位"
+                  :rules="rules.dept"
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-duty" />
+                <div>职务:</div>
+              </div>
+              <van-field
+                  v-model="form.duty"
+                  class="common-field"
+                  placeholder="请输入职务"
+                  :rules="rules.duty"
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-officePhone" />
+                <div>办公电话:</div>
+              </div>
+              <van-field
+                  v-model="form.officePhone"
+                  class="common-field"
+                  placeholder="请输入办公电话"
+                  :rules="rules.officePhone"
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-responsibility" />
+                <div>责任类别:</div>
+              </div>
+              <van-field
+                  v-model="responsibilityTypeText"
+                  class="common-field"
+                  :right-icon="selectIcon"
+                  readonly
+                  placeholder="请选择行政区划"
+                  :rules="rules.responsibilityType"
+                  @click="showPicker2 = true"
+              />
+              <van-popup v-model:show="showPicker2" destroy-on-close round position="bottom">
+                <van-picker
+                    :model-value="pickerValue2"
+                    :columns="region"
+                    @cancel="showPicker2 = false"
+                    @confirm="onConfirm2"
+                />
+              </van-popup>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="common-form-footer">
+        <van-button class="btn" @click="onCancel">取消</van-button>
+        <van-button class="btn primary-btn" :loading="submitting" type="primary" native-type="submit">提交</van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script lang="ts" setup name="EditPersonInformation">
+import selectIcon from "@/assets/images/selectIcon.png";
+import {showSuccessToast} from "vant";
+import {useRouter} from "vue-router";
+import {Numeric} from "vant/es/utils";
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { region } = toRefs<any>(proxy?.useDict('region'));
+const router = useRouter();
+let id = ref('');
+// 表单数据
+const form = ref({
+  name: '',
+  phone: '',
+  area: '',
+  dept: '',
+  duty: '',
+  officePhone: '',
+  responsibilityType: ''
+});
+// 表单校验规则
+const rules = reactive({
+  name: [{ required: true, message: '姓名不能为空' }],
+  phone: [{ required: true, message: '手机号码不能为空' }],
+  area: [{ required: true, message: '请选择行政区划' }],
+  dept: [{ required: true, message: '所属单位不能为空' }],
+  duty: [{ required: true, message: '职务不能为空' }],
+  officePhone: [{ required: true, message: '办公电话不能为空' }],
+  responsibilityType: [{ required: true, message: '请选择责任类别' }]
+});
+
+let showPicker = ref(false);
+let areaText = ref('');
+const handleSelect = (data) => {
+  areaText.value = data.label;
+  form.value.area = data.value;
+}
+let showPicker2 = ref(false);
+let responsibilityTypeText = ref('');
+const pickerValue2 = ref<Numeric[]>([]);
+// 选择任务完成情况
+const onConfirm2 = ({ selectedValues, selectedOptions }) => {
+  showPicker2.value = false;
+  pickerValue2.value = selectedValues;
+  form.value.responsibilityType = selectedOptions[0].value;
+  responsibilityTypeText.value = selectedOptions[0].text;
+};
+// 是否在提交
+let submitting = ref(false);
+// 返回
+const onCancel = () => {
+  router.go(-1);
+};
+
+// 提交表单
+const onSubmit = () => {
+  if (submitting.value) return;
+  submitting.value = true;
+  setTimeout(() => {
+    submitting.value = false;
+    showSuccessToast('提交成功');
+    onCancel();
+  }, 1500);
+}
+</script>
+
+<style lang="scss" scoped>
+.common-form-container {
+  height: 100vh;
+  padding: 0 0 89px 0;
+  .item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin-bottom: 24px;
+    .label-box {
+      width: 122px;
+      display: flex;
+      align-items: center;
+      margin-right: 9px;
+      .icon-name {
+        background: url('@/assets/images/threePreventionResponsiblePerson/name.png') no-repeat;
+      }
+      .icon-phone {
+        background: url('@/assets/images/threePreventionResponsiblePerson/tel.png') no-repeat;
+      }
+      .icon-area {
+        background: url('@/assets/images/threePreventionResponsiblePerson/area.png') no-repeat;
+      }
+      .icon-dept {
+        background: url('@/assets/images/threePreventionResponsiblePerson/dept.png') no-repeat;
+      }
+      .icon-duty {
+        background: url('@/assets/images/threePreventionResponsiblePerson/duty.png') no-repeat;
+      }
+      .icon-officePhone {
+        background: url('@/assets/images/threePreventionResponsiblePerson/phone.png') no-repeat;
+      }
+      .icon-responsibility {
+        background: url('@/assets/images/threePreventionResponsiblePerson/responsibility.png') no-repeat;
+      }
+      .icon-name,
+      .icon-phone,
+      .icon-area,
+      .icon-dept,
+      .icon-duty,
+      .icon-officePhone,
+      .icon-responsibility {
+        width: 16px;
+        height: 16px;
+        background-size: 100% 100%;
+        margin-right: 3px;
+      }
+    }
+    .common-field {
+      overflow: unset;
+    }
+    :deep(.van-cell) {
+      padding: 0;
+    }
+    :deep(.van-field__error-message) {
+      position: absolute;
+      bottom: -24px;
+      left: 0;
+      z-index: 10;
+    }
+  }
+}
+</style>

src/views/workApproval/confirmDialog.vue

@@ -24,13 +24,12 @@
                     <van-button type="primary" native-type="submit">提 交</van-button>
                 </div>
             </div>
-        </van-form>    
+        </van-form>
     </van-popup>
-    
+
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, ref, watch, defineEmits } from 'vue';
 import { WorkApprovalConfirm } from "@/api/InformationReception/InformationReception";
 import { showSuccessToast } from 'vant';
 
@@ -95,4 +94,4 @@ const closeDialog = (t) => {
     font-weight: 600;
     line-height: 6.0vmin;
 }
-</style>
+</style>

src/views/worker/eventManagement/approvalDialog.vue

@@ -25,13 +25,12 @@
                     <van-button type="primary" native-type="submit">确 定</van-button>
                 </div>
             </div>
-        </van-form>    
+        </van-form>
     </van-popup>
-    
+
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, ref, watch, defineEmits } from 'vue';
 import { addApproval } from '@/api/emergencyCommandMap/JointDuty';
 import { showSuccessToast } from 'vant';
 
@@ -92,4 +91,4 @@ const closeDialog = (t) => {
     font-weight: 600;
     line-height: 6.0vmin;
 }
-</style>
+</style>

src/views/worker/eventManagement/feebackDialog.vue

@@ -18,7 +18,7 @@
                     placeholder="选择事件等级"
                     @click="show_processing_status_picker = true"
                 />
-                
+
                 <div style="font-size:14px;color:var(--van-field-label-color);margin-top:10px;padding-left: 15px;">反馈内容：</div>
                 <van-field
                     required
@@ -37,7 +37,7 @@
                         <ImageUpload v-model="form.fileList" :fileType="['png', 'jpeg', 'jpg']"/>
                     </template>
                 </van-field>
-                
+
             </van-cell-group>
             <div style="margin: 3.0vmin;display: flex;
                 flex-direction: row;
@@ -47,7 +47,7 @@
                     <van-button type="primary" native-type="submit">确 定</van-button>
                 </div>
             </div>
-        </van-form>    
+        </van-form>
     </van-popup>
 
     <van-popup v-model:show="show_processing_status_picker" round position="bottom">
@@ -57,11 +57,10 @@
             @confirm="on_processing_status_confirm"
         />
     </van-popup>
-    
+
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, ref, watch, defineEmits } from 'vue';
 import { addFeeback } from '@/api/emergencyCommandMap/JointDuty';
 import { showSuccessToast } from 'vant';
 
@@ -142,4 +141,4 @@ const closeDialog = (t) => {
     font-weight: 600;
     line-height: 6.0vmin;
 }
-</style>
+</style>

src/views/worker/eventManagement/requestDialog.vue

@@ -36,12 +36,11 @@
                     <van-button type="primary" native-type="submit">确 定</van-button>
                 </div>
             </div>
-        </van-form>    
+        </van-form>
     </van-popup>
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, ref, watch, defineEmits } from 'vue';
 import { addLeaderRequest } from '@/api/emergencyCommandMap/JointDuty';
 import { showSuccessToast } from 'vant';
 
@@ -116,4 +115,4 @@ const closeDialog = (t) => {
     margin-top:10px;
     padding-left: 15px;
 }
-</style>
+</style>