图片上传

刘淇
1 parent 3bea8ade
Showing 8 changed files with 185 additions and 25 deletions
App.vue
pages.json
pages/work/treePage/treeFiles.vue
subPackages/treePage/addTree.vue
subPackages/treePage/editTree.vue
subPackages/treePage/treeDetail.vue
subPackages/treePage/treeFiles.vue
subPackages/treePage/treeLog.vue
@@ -17,6 +17,7 @@ export default {
 <style lang="scss">
 page {
 	background-color: #F4F4F4;
+  color: #333;
 }
 @import './components/thorui/fui-css/firstui.scss';
 </style>
@@ -296,7 +296,20 @@
 					"style": {
 						"navigationBarTitleText": "录入树木"
 					}
+				},
+				{
+					"path": "treePage/editTree",
+					"style": {
+						"navigationBarTitleText": "修改树木"
+					}
+				},
+				{
+					"path": "treePage/treeDeatil",
+					"style": {
+						"navigationBarTitleText": "树木详情"
+					}
 				}
+
 			]
 		}
 	  ],
-<script>
-
-
-export default {
-  name: "treeFiles"
-}
-</script>
-
-<template>
-<view>treeFiles</view>
-</template>
-
-<style scoped>
-
-</style>
 \ No newline at end of file
@@ -207,14 +207,14 @@ const rules = [{
   name: "oldtreeownership",
   rule: ["required"],
   msg: ["请选择权属分类"]
-}, {
+},{
   name: "treeImgList",
-  // 自定义验证函数处理数组类型
-  rule: [(value) => {
-    // 验证逻辑：数组长度至少为1
-    return Array.isArray(value) && value.length > 0;
-  }],
-  msg: ["请上传图片"]
+  rule: ["required", "custom"], // 增加required强制必选
+  msg: ["请上传图片", "请至少上传一张图片"], // 对应两个规则的提示
+  custom: function(value) {
+    // 即使required通过，再校验数组长度
+    return value.length > 0;
+  }
 }];
 export default {
   props: {
@@ -278,6 +278,8 @@ export default {
   },
   onReady() {
     //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则
+    // 开启即时校验，参数：是否开启、校验规则
+    this.$refs.form && this.$refs.form.immediateValidate(true, rules);
     // this.$refs.form && this.$refs.form.immediateValidate(true, rules)
   },
   methods: {
@@ -290,7 +292,11 @@ export default {
       if (e.status == 1){
         console.log(e)
-        this.formData.treeImgList.push(e.imgArr);
+        // this.formData.treeImgList.push(e.imgArr);
+
+        this.formData.treeImgList = e.imgArr;
+        // 手动触发treeImgList字段的校验
+        this.$refs.form.validateField("treeImgList");
         console.log(this.formData.treeImgList)
         console.log(this.formData.treeImgList.length)
       }
@@ -322,6 +328,13 @@ export default {
     },
     submit() {
+      // 3. 打印提交时的数据
+      console.log("提交时treeImgList：", this.formData.treeImgList);
+      // 手动校验图片
+      if (!this.formData.treeImgList || this.formData.treeImgList.length === 0) {
+        uni.showToast({ title: "请上传图片", icon: "none" });
+        return; // 阻止提交
+      }
       //注：结合FormItem校验，validate方法第三个参数必须传true
       this.$refs.form.validate(this.formData, rules, true).then(res => {
         if (res.isPass) {
+
+<template>
+
+  <view class="container">
+    <tui-tab :tabs="tabs" scroll @change="tabChange"></tui-tab>
+
+
+    <view class="content-container">
+      <view v-if="currentName === '基本信息'">xiugai基本信息</view>
+
+      <treeLog v-if="currentName === '变更日志'" :logId="id" />
+    </view>
+  </view>
+
+</template>
+<script >
+import treeLog from "./treeLog.vue";
+export default {
+  components:{treeLog},
+  name: "editTree",
+  data(){
+    return{
+      tabs:['基本信息','变更日志',],
+      currentName:'基本信息',
+      id:''
+    }
+  },
+  onLoad(options){
+    this.id = options.id
+  },
+  methods:{
+    tabChange(i){
+      console.log(i.item.name)
+      this.currentName = i.item.name
+    }
+  }
+}
+</script>
+
+
+
+<style scoped>
+.content-container{
+  padding-top: 20rpx;
+}
+
+</style>
 \ No newline at end of file
+<script lang="ts">
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "treeDetail"
+})
+</script>
+
+<template>
+  <template>
+
+    <view class="container">
+      <tui-tab :tabs="tabs" scroll @change="tabChange"></tui-tab>
+
+
+      <view class="content-container">
+        <view v-if="currentName === '基本信息'">xiugai基本信息</view>
+
+        <treeLog v-if="currentName === '变更日志'" :logId="id" />
+      </view>
+    </view>
+
+  </template>
+  <script >
+  import treeLog from "./treeLog.vue";
+  export default {
+    components:{treeLog},
+    name: "editTree",
+    data(){
+      return{
+        tabs:['基本信息','变更日志',],
+        currentName:'基本信息',
+        id:''
+      }
+    },
+    onLoad(options){
+      this.id = options.id
+    },
+    methods:{
+      tabChange(i){
+        console.log(i.item.name)
+        this.currentName = i.item.name
+      }
+    }
+  }
+  </script>
+
+
+
+  <style scoped>
+    .content-container{
+      padding-top: 20rpx;
+    }
+
+  </style>
+
+</template>
+
+<style scoped>
+
+</style>
 \ No newline at end of file
@@ -25,7 +25,9 @@
         <view v-for="(i,index) in 7" class="teamsItem" :key="index"
               @click="teamsChange(i)"
               :class="{teamsActive:index==currentIndex}"
-        >{{ i }}
+        >
+          <view class="fs-ellipsis fs-pt16 fs-pb16  fs-pl8 fs-pr8">归属班组归属班组归属班组</view>
+
         </view>
       </view>
       <view class="full-height-col right-con">
@@ -150,7 +152,6 @@ export default {
 }
 .teamsItem {
-  padding: 10rpx 10rpx 0;
 }
 .teamsActive {
+<script>
+
+
+export default {
+  name: "treeLog",
+  props: {
+    logId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    logId: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.initLog()
+        }
+      }
+    }
+  },
+  methods: {
+    async initLog() {
+    }
+  }
+}
+</script>
+
+<template>
+  <view>log</view>
+
+</template>
+
+<style scoped>
+
+</style>
 \ No newline at end of file