From e5d2a2cb80799862090e914528ea35d5b84f1df3 Mon Sep 17 00:00:00 2001
From: Wayne <943146732@qq.com>
Date: Thu, 29 Feb 2024 16:28:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=97=A8=E5=BA=97=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/store/shop/Create.vue |  85 +++++++++++++++++++++++--
 src/views/store/shop/Update.vue | 107 ++++++++++++++++++++++++++++++--
 2 files changed, 184 insertions(+), 8 deletions(-)

diff --git a/src/views/store/shop/Create.vue b/src/views/store/shop/Create.vue
index ab5bae4..9ed9a48 100644
--- a/src/views/store/shop/Create.vue
+++ b/src/views/store/shop/Create.vue
@@ -77,10 +77,36 @@
           <a-radio-group v-decorator="['is_main', { initialValue: 0, rules: [{ required: true }] }]">
             <a-radio :value="0">不是</a-radio>
             <a-radio :value="1">是</a-radio>
-
           </a-radio-group>
         </a-form-item>
 
+        <a-form-item
+          v-for="(k, index) in form.getFieldValue('historys')"
+          :key="k.id"
+          :label="index === 0 ? '门店历史' : ''"
+          :labelCol="labelCol"
+          v-bind="index === 0 ? {wrapperCol} : formItemLayoutWithOutLabel"
+          required>
+          <a-date-picker
+            format="YYYY-MM-DD"
+            v-decorator="[`historysTime${index}`, { rules: [{ required: true, message: '请指定日期' }] }]"
+            style="width: 30%; margin-right: 8px"
+          />
+          <a-input placeholder="请输入门店历史" v-decorator="[`historysContent${index}`, { rules: [{ required: true }] }]" style="width: 30%; margin-right: 8px" />
+          <a-icon
+            v-if="form.getFieldValue('historys').length > 0"
+            class="dynamic-delete-button"
+            type="minus-circle-o"
+            :disabled="form.getFieldValue('historys').length === 1"
+            @click="() => handleRemoveHistory(index)"
+          />
+        </a-form-item>
+        <a-form-item v-bind="formItemLayoutWithOutLabel">
+          <a-button type="dashed" style="width: calc(60% + 8px)" @click="handleAddHistory">
+            <a-icon type="plus" /> 新增门店历史
+          </a-button>
+        </a-form-item>
+
         <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <div>
             <template v-for="(tag, index) in tags">
@@ -130,6 +156,7 @@
 </template>
 
 <script>
+import moment from 'moment'
 import * as Api from '@/api/store/shop'
 import { SelectImage, SelectRegion, Getpoint } from '@/components'
 
@@ -149,13 +176,21 @@ export default {
       // 输入框布局属性
       wrapperCol: { span: 10 },
       // 当前表单元素
-      form: this.$form.createForm(this),
+      // form: this.$form.createForm(this),
 
       tags: [],
       tagInputVisible: false,
-      tagInputValue: ''
+      tagInputValue: '',
+
+      formItemLayoutWithOutLabel: {
+        wrapperCol: { span: 10, offset: 3 }
+      }
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+    this.form.getFieldDecorator('historys', { initialValue: [], preserve: true })
+  },
   created () {
   },
   methods: {
@@ -188,6 +223,38 @@ export default {
       })
     },
 
+    generateRandomString (length) {
+      let result = ''
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+      const charactersLength = characters.length
+      for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength))
+      }
+      return result
+    },
+
+    handleRemoveHistory (index) {
+      const { form } = this
+      const keys = form.getFieldValue('historys')
+      if (keys.length === 0) {
+        return
+      }
+
+      const historys = keys.filter((x, i) => i !== index)
+
+      form.setFieldsValue({
+        historys
+      })
+    },
+    handleAddHistory () {
+      const { form } = this
+      const keys = form.getFieldValue('historys')
+      const nextKeys = keys.concat([{ historysTime: '', historysContent: '', id: this.generateRandomString(8) }])
+      form.setFieldsValue({
+        historys: nextKeys
+      })
+    },
+
     // 设置门店坐标
     setCoordinate (coordinate) {
       const { form, $nextTick } = this
@@ -208,9 +275,19 @@ export default {
 
     // 提交到后端api
     onFormSubmit (values) {
+      const form = { ...values, remark: this.tags, shop_image_id: values.shop_image_id.join(',') }
+      form.history = form.historys.map((x, i) => {
+        return {
+          time: form[`historysTime${i}`] && form[`historysTime${i}`].format('YYYY-MM-DD'),
+          content: form[`historysContent${i}`]
+        }
+      })
+
+      delete form['historys']
+
       this.isLoading = true
       this.isBtnLoading = true
-      Api.add({ form: { ...values, remark: this.tags, shop_image_id: values.shop_image_id.join(',') } })
+      Api.add({ form })
         .then(result => {
           // 显示提示信息
           this.$message.success(result.message, 1.5)
diff --git a/src/views/store/shop/Update.vue b/src/views/store/shop/Update.vue
index 15a7e67..a63985c 100644
--- a/src/views/store/shop/Update.vue
+++ b/src/views/store/shop/Update.vue
@@ -83,6 +83,33 @@
           </a-radio-group>
         </a-form-item>
 
+        <a-form-item
+          v-for="(k, index) in form.getFieldValue('historys')"
+          :key="k.id"
+          :label="index === 0 ? '门店历史' : ''"
+          :labelCol="labelCol"
+          v-bind="index === 0 ? {wrapperCol} : formItemLayoutWithOutLabel"
+          required>
+          <a-date-picker
+            format="YYYY-MM-DD"
+            v-decorator="[`historysTime${index}`, { rules: [{ required: true, message: '请指定日期' }] }]"
+            style="width: 30%; margin-right: 8px"
+          />
+          <a-input placeholder="请输入门店历史" v-decorator="[`historysContent${index}`, { rules: [{ required: true }] }]" style="width: 30%; margin-right: 8px" />
+          <a-icon
+            v-if="form.getFieldValue('historys').length > 0"
+            class="dynamic-delete-button"
+            type="minus-circle-o"
+            :disabled="form.getFieldValue('historys').length === 1"
+            @click="() => handleRemoveHistory(index)"
+          />
+        </a-form-item>
+        <a-form-item v-bind="formItemLayoutWithOutLabel">
+          <a-button type="dashed" style="width: calc(60% + 8px)" @click="handleAddHistory">
+            <a-icon type="plus" /> 新增门店历史
+          </a-button>
+        </a-form-item>
+
         <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <div>
             <template v-for="(tag, index) in tags">
@@ -132,10 +159,12 @@
 </template>
 
 <script>
+import moment from 'moment'
 import pick from 'lodash.pick'
 import * as Api from '@/api/store/shop'
 import { isEmpty } from '@/utils/util'
 import { SelectImage, SelectRegion, Getpoint } from '@/components'
+import { log } from '@/api/market/points'
 
 export default {
   components: {
@@ -153,7 +182,7 @@ export default {
       // 输入框布局属性
       wrapperCol: { span: 10 },
       // 当前表单元素
-      form: this.$form.createForm(this),
+      // form: this.$form.createForm(this),
       // 门店ID
       shopId: null,
       // 当前记录
@@ -161,9 +190,17 @@ export default {
 
       tags: [],
       tagInputVisible: false,
-      tagInputValue: ''
+      tagInputValue: '',
+
+      formItemLayoutWithOutLabel: {
+        wrapperCol: { span: 10, offset: 3 }
+      }
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+    this.form.getFieldDecorator('historys', { initialValue: [], preserve: true })
+  },
   created () {
     // 记录门店ID
     this.shopId = this.$route.query.shopId
@@ -217,12 +254,33 @@ export default {
     // 设置表单默认值
     setFieldsValue () {
       const { record, form, $nextTick } = this
+      const timeAry = []
+      const contentAry = []
+      if (record.history) {
+        record.history = JSON.parse(record.history)
+        record.historys = record.history.map(x => {
+          x.id = this.generateRandomString(8)
+          return x
+        })
+
+        record.historys.forEach((x, i) => {
+          x.time && (record[`historysTime${i}`] = moment(new Date(x.time)))
+          record[`historysContent${i}`] = x.content
+
+          timeAry.push(`historysTime${i}`)
+          contentAry.push(`historysContent${i}`)
+
+          this.form.getFieldDecorator(`historysTime${i}`, { initialValue: '', preserve: true })
+          this.form.getFieldDecorator(`historysContent${i}`, { initialValue: '', preserve: true })
+        })
+      }
+
       // 设置表单内容
       !isEmpty(form.getFieldsValue()) && $nextTick(() => {
         form.setFieldsValue(pick(record, [
           'shop_name', 'logo_image_id', 'linkman', 'phone',
           'shop_hours', 'address', 'summary', 'cascader',
-          'coordinate', 'sort', 'is_check', 'status', 'is_main'
+          'coordinate', 'sort', 'is_check', 'status', 'is_main', 'historys', ...timeAry, ...contentAry
         ]))
       })
 
@@ -230,6 +288,37 @@ export default {
         this.tags = JSON.parse(record.remark)
       }
     },
+    generateRandomString (length) {
+      let result = ''
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+      const charactersLength = characters.length
+      for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength))
+      }
+      return result
+    },
+    handleRemoveHistory (index) {
+      const { form } = this
+      const keys = form.getFieldValue('historys')
+      if (keys.length === 0) {
+        return
+      }
+      keys.splice(index, 1)
+      console.log(keys)
+
+      form.setFieldsValue({
+        historys: keys
+      })
+    },
+    handleAddHistory () {
+      const { form } = this
+      const keys = form.getFieldValue('historys')
+
+      const nextKeys = keys.concat([{ historysTime: '', historysContent: '', id: this.generateRandomString(8) }])
+      form.setFieldsValue({
+        historys: nextKeys
+      })
+    },
 
     // 设置门店坐标
     setCoordinate (coordinate) {
@@ -251,9 +340,19 @@ export default {
 
     // 提交到后端api
     onFormSubmit (values) {
+      const form = { ...values, remark: this.tags, shop_image_id: values.shop_image_id.join(',') }
+      form.history = form.historys.map((x, i) => {
+        return {
+          time: form[`historysTime${i}`] && form[`historysTime${i}`].format('YYYY-MM-DD'),
+          content: form[`historysContent${i}`]
+        }
+      })
+
+      delete form['historys']
+
       this.isLoading = true
       this.isBtnLoading = true
-      Api.edit({ shopId: this.shopId, form: { ...values, remark: this.tags, shop_image_id: values.shop_image_id.join(',') } })
+      Api.edit({ shopId: this.shopId, form })
           .then(result => {
             // 显示提示信息
             this.$message.success(result.message, 1.5)