添加编辑走访慰问

src/apps/AppWalkask/components/add.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="add">
+    <u-navbar title="新建走访" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :background="backgroundNavbar"> </u-navbar>
+
+    <div class="header-content">
+      <u-form :model="forms" ref="uForm" label-width="auto">
+        <u-form-item label="区域选择" prop="areaId" required style="position: relative">
+          <u-input v-model="forms.areaId" disabled placeholder="请选择区域" @click="showAreaId = true" />
+
+          <u-select v-model="showAreaId" :list="areaIdlist" @confirm="changeAreaId"></u-select>
+
+          <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
+        </u-form-item>
+
+        <u-form-item label="走访对象" prop="object" style="position: relative">
+          <u-input v-model="forms.object" disabled placeholder="请选择走访对象" @click="showObject = true" />
+
+          <u-select v-model="showObject" :list="Objectlist" @confirm="changeObject"></u-select>
+
+          <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
+        </u-form-item>
+
+        <u-form-item label="现实状态" prop="nowStstus" required style="position: relative">
+          <u-input v-model="forms.nowStstus" disabled placeholder="请选择走访对象" @click="showStstus = true" />
+
+          <u-select v-model="showStstus" :list="Objectlist" @confirm="changeStstus"></u-select>
+
+          <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
+        </u-form-item>
+
+        <u-form-item label="入户走访事项" prop="things" required label-position="top">
+          <u-input v-model="forms.things" placeholder="请输入入户走访事项(30字以内)" type="textarea" auto-height height="60" maxlength="30" />
+          <div>{{ forms.things.length }}/30</div>
+        </u-form-item>
+
+        <u-form-item label="入户走访内容" prop="content" label-position="top">
+          <u-input v-model="forms.content" placeholder="请输入入户走访事项(500字以内)" type="textarea" auto-height height="60" maxlength="500" />
+          <div>{{ forms.things.length }}/500</div>
+        </u-form-item>
+
+        <u-form-item label="图片" prop="avatar" required label-position="top">
+          <ai-uploader v-model="forms.avatar" multiple @change="change" placeholder="上传图片" :limit="5"></ai-uploader>
+        </u-form-item>
+      </u-form>
+    </div>
+
+    <div class="btn" @click="submit">保存</div>
+  </div>
+</template>
+
+<script>
+import AiUploader from '../../../components/AiUploader.vue'
+
+export default {
+  name: 'add',
+  components: { AiUploader },
+  props: {},
+  data() {
+    return {
+      backgroundNavbar: {
+        backgroundColor: '#3975C6',
+      },
+      forms: {
+        areaId: '',
+        object: '',
+        nowStstus: '',
+        things: '',
+        content: '',
+        avatar: [],
+      },
+      showAreaId: false,
+      areaIdlist: [
+        {
+          value: '1',
+          label: '江',
+        },
+        {
+          value: '2',
+          label: '湖',
+        },
+      ],
+      Objectlist: [
+        {
+          value: '0',
+          label: '武汉',
+        },
+        {
+          value: '1',
+          label: '北京',
+        },
+      ],
+      showObject: false,
+      showStstus: false,
+      flag: false,
+    }
+  },
+  computed: {},
+  onLoad() {},
+  onShow() {},
+  methods: {
+    submit() {
+      if (this.flag) return
+
+      this.$refs.uForm.validate((valid) => {
+        if (valid) {
+          if (!this.form.areaId) {
+            return this.$u.toast('请选择走访对象')
+          }
+          if (!this.form.things) {
+            return this.$u.toast('请输入入户走访事项')
+          }
+
+          this.flag = true
+          this.$instance
+            .post(`/appjobresume/addOrUpdate`, {
+              areaId: this.forms.areaId,
+              object: this.forms.object,
+              nowStstus: this.forms.nowStstus,
+              things: this.forms.things,
+              content: this.forms.content,
+              avatar: this.forms.avatar[0],
+              // education: this.form.education == Number ? this.form.education : this.forms.educationValue,
+              id: this.id,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$u.toast('保存成功')
+                this.flag = false
+                uni.navigateBack({})
+              }
+            })
+        } else {
+          this.$u.toast('保存失败')
+        }
+      })
+    },
+
+    changeAreaId(e) {
+      console.log(e)
+      this.forms.areaId = e[0].value
+      this.forms.areaIdValue = e[0].label
+    },
+
+    changeObject(e) {
+      console.log(e)
+      this.forms.object = e[0].value
+      this.forms.objectlabel = e[0].label
+    },
+
+    changeStstus(e) {
+      console.log(e)
+      this.forms.nowStstus = e[0].value
+      this.forms.nowStstuslabel = e[0].label
+    },
+
+    change(e) {
+      console.log(e)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+  padding-bottom: 112px;
+  .header-content {
+    ::v-deep .u-form {
+      .u-form-item {
+        margin-bottom: 16px;
+      }
+      .u-form-item:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365dd;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #ffffff;
+  }
+}
+</style>