fix:页面修改为VUE3模式。

src/pages/work/heartJourney/addEdit.vue

@@ -1,8 +1,13 @@
 <template>
     <view class="container" style="paddingBottom:1rpx;">
-      <uni-navbar title="心路历程"></uni-navbar>
+      <u-navbar
+			leftIconSize="40rpx"
+			leftIconColor="#333333"
+			title="心路历程"
+		>
+		</u-navbar>
       <view class="section">
-        <view class="section-title">心路历程</view>
+        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -43,102 +48,100 @@
     </view>
   </template>
   
-  <script>
-  import { listHeartJourney, getHeartJourney, delHeartJourney, addHeartJourney, updateHeartJourney } from '@/api/invest/heartJourney'
+  <script setup>
+  import {getHeartJourney, addHeartJourney, updateHeartJourney } from '@/api/invest/heartJourney'
   import { getDicts } from '@/api/system/dict/data.js'
+  const { proxy } = getCurrentInstance()
   import dayjs from 'dayjs'
-  export default {
-    data() {
-      return {
-        form: {
-          createTime: '',
-          name: '',
-          remark: '',
-          type: '',
-          createTime: '',
-          typeName: '',
-          id: '',
-        },
-        rules: {
+  import {onLoad,onReady} from "@dcloudio/uni-app";
+    // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+const datePickShow = ref(false)
+const showTeam = ref(false)
+const title = ref("心路历程")
+const journeyTypeList = ref([])
+const data = reactive({
+  form: {},
+  rules: {
           name: [{ type: 'string', required: true, message: '请输入标题', trigger: ['change', 'blur'] }],
           createTime: [{ type: 'string', required: true, message: '请选择记录时间', trigger: ['change', 'blur'] }],
           type: [{ type: 'string', required: true, message: '请选择类型', trigger: ['change', 'blur'] }],
           remark: [{ type: 'string', required: true, message: '请输入内容', trigger: ['change', 'blur'] }],
-        },
-        datePickShow: false,
-        id: '',
-        showTeam: false,
-        journeyTypeList: []
-      }
-    },
-    onLoad(option) {
-      this.form.id = option.id
-      this.getDict()
-    },
-    onReady() {
-      this.$refs.uForm.setRules(this.rules)
-    },
-    methods: {
-      getDict() {
+  }
+})
+const { form, rules} = toRefs(data)
+
+onLoad((option) => {
+       form.value.id = option.id
+       if(form.value.id!=null){
+        title.value="心路历程-修改"
+       }else{
+        title.value="心路历程-新增"
+       }
+      getDict()
+  })
+  onReady(() => {
+    proxy.$refs['uForm'].setRules(rules.value)
+  })
+  function  getDict() {
         // 工单状态
-      getDicts('journey_type').then(res => {
-        this.journeyTypeList =[res.data] 
+        getDicts('journey_type').then(res => {
+        journeyTypeList.value =[res.data] 
       })
-      if(this.form.id!=null){
-        getHeartJourney(this.form.id).then(res => {
-          this.form = res.data
+      if(form.value.id!=null){
+        getHeartJourney(form.value.id).then(res => {
+          form.value = res.data
         })
       }
-      },
-      handleShowTeam() {
-        if (this.journeyTypeList[0].length === 0) {
-          this.$refs.uToast.show({
+  }
+
+
+  function handleShowTeam() {
+        if (journeyTypeList.value[0].length === 0) {
+          proxy.$refs['uToast'].show({
             message: '类型为空  ', type: 'warning'
           })
         } else {
-          this.showTeam = true
+          showTeam.value = true
         }
-      },
-      handleConfirm(e) {
-        this.form.typeName = e.value[0].dictLabel
-        this.form.type = e.value[0].dictValue
-        this.showTeam = false
-      },
-      handleCancel() {
-        this.showTeam = false
-      },
-      selectDate() {
-				this.datePickShow = true
-        this.$refs.createTimeRef.innerValue = new Date().getTime()
-			},
-			datePickConfirm(e) {
-				this.form.createTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss")
-				this.datePickShow = false
-			},
-      submit() {
-        this.$refs.uForm.validate().then(() => {
-          if (this.form.id != null) {
-            updateHeartJourney({ ...this.form}).then(res => {
-            this.$refs.uToast.show({
+      }
+      function   handleConfirm(e) {
+        form.value.typeName = e.value[0].dictLabel
+        form.value.type = e.value[0].dictValue
+        showTeam.value = false
+      }
+      function handleCancel() {
+       showTeam.value = false
+      }
+      function  selectDate() {
+				datePickShow.value = true
+        proxy.$refs['createTimeRef'].innerValue = new Date().getTime()
+			}
+			function datePickConfirm(e) {
+				form.value.createTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss")
+				datePickShow.value = false
+			}
+      function submit() {
+        proxy.$refs['uForm'].validate().then(() => {
+          if (form.value.id != null) {
+            updateHeartJourney(form.value).then(res => {
+              proxy.$refs['uToast'].show({
               message: '修改成功', complete() {
                 uni.navigateTo({ url: `/pages/work/heartJourney/list` })
               }
             })
           })
           }else {
-            addHeartJourney({ ...this.form}).then(res => {
-            this.$refs.uToast.show({
+            addHeartJourney(form.value).then(res => {
+              proxy.$refs['uToast'].show({
               message: '新增成功', complete() {
                 uni.navigateTo({ url: `/pages/work/heartJourney/list` })
               }
             })
           })
           }
-    
         })
-      },
-    }
-  }
+      }
   </script>
   
   <style lang="scss" scoped>
@@ -149,7 +152,7 @@
     border-radius: 8rpx;
   
     .section-title {
-      width: 160rpx;
+      width: 360rpx;
       color: #333333;
       line-height: 44rpx;
       font-size: 30rpx;