BUG 26029

2021-12-24 22:45:52 +08:00
parent 33685758f3
commit 587dd3f899
7 changed files with 174 additions and 241 deletions
--- a/src/apps/AppAskForm/components/AddForm.vue
+++ b/src/apps/AppAskForm/components/AddForm.vue
@@ -1,156 +1,134 @@
 <template>
  <div class="add-form" v-if="pageShow">
-    <div v-show="!isShowConfig">
-      <div class="header-pic">
-        <image v-if="form.headPicture" :src="form.headPicture"/>
-        <span @click="upload">更换图片</span>
-      </div>
-      <div class="form-info">
-        <h2>文本选项</h2>
-        <div class="form-info__wrapper">
+    <div class="header-pic">
+      <image v-if="form.headPicture" :src="form.headPicture"/>
+      <span @click="upload">更换图片</span>
+    </div>
+    <div class="form-info">
+      <h2>文本选项</h2>
+      <div class="form-info__wrapper">
          <textarea class="title" placeholder="请输入标题 (必填）" :maxlength="30" :auto-height="true"
                    v-model="form.title"></textarea>
-          <textarea
-              class="content"
-              border="none"
-              :clearable="false"
-              type="textarea"
-              v-model="form.tableExplain"
-              placeholder="请输入表单描述 (选填）"
-              :maxlength="255">
+        <textarea
+            class="content"
+            border="none"
+            :clearable="false"
+            type="textarea"
+            v-model="form.tableExplain"
+            placeholder="请输入表单描述 (选填）"
+            :maxlength="255">
          </textarea>
-        </div>
      </div>
-      <draggable
-          class="components-list"
-          v-model="targetList"
-          :animation="340"
-          scroll
-          element="div"
-          :options="{
+    </div>
+    <draggable
+        class="components-list"
+        v-model="targetList"
+        :animation="340"
+        scroll
+        element="div"
+        :options="{
          animation: 340,
          handle: '.components-item__title'
        }"
-          draggable=".components-item"
-          :sort="true">
-        <div class="components-item" v-for="(item, index) in targetList" :key="index"
-             @click="toFiledSetting(item, index)">
-          <div class="components-item__title">
-            <div class="components-item__title--left">
-              <em :style="{opacity: item.required ? 1 : 0}">*</em>
-              <i>{{ index + 1 }}.</i>
-              <h2>{{ item.label }}</h2>
+        draggable=".components-item"
+        :sort="true">
+      <div class="components-item" v-for="(item, index) in targetList" :key="index"
+           @click="toFiledSetting(item, index)">
+        <div class="components-item__title">
+          <div class="components-item__title--left">
+            <em :style="{opacity: item.required ? 1 : 0}">*</em>
+            <i>{{ index + 1 }}.</i>
+            <h2>{{ item.label }}</h2>
+          </div>
+          <image :src="`${$cdn}askform/sc1.png`" @click.stop="removeComponent(index)"
+                 @touchstart.stop="removeComponent(index)"/>
+        </div>
+        <div class="components-item__filed">
+          <template v-if="(item.type === 'radio')">
+            <u-radio-group v-model="item.value" wrap>
+              <u-radio class="u-radio" disabled style="display: block;" v-for="(field, i) in item.options" :key="i">
+                <image :src="field.img[0].url" v-if="field.img.length"/>
+                <span>{{ field.label }}</span>
+              </u-radio>
+            </u-radio-group>
+          </template>
+          <template v-if="(item.type === 'checkbox')">
+            <u-checkbox-group v-model="item.value" wrap>
+              <u-checkbox class="u-checkbox" disabled :name="field.label" v-for="(field, i) in item.options" :key="i">
+                <image :src="field.img[0].url" v-if="field.img.length"/>
+                <span>{{ field.label }}</span>
+              </u-checkbox>
+            </u-checkbox-group>
+          </template>
+          <template v-if="(item.type === 'select')">
+            <div class="components-item__select">
+              <span>{{ item.placeholder }}</span>
+              <u-icon name="arrow-down" color="#DEDFDF"/>
            </div>
-            <image :src="`${$cdn}askform/sc1.png`" @click.stop="removeComponent(index)"
-                   @touchstart.stop="removeComponent(index)"/>
-          </div>
-          <div class="components-item__filed">
-            <template v-if="(item.type === 'radio')">
-              <u-radio-group v-model="item.value" wrap>
-                <u-radio class="u-radio" disabled style="display: block;" v-for="(field, i) in item.options" :key="i">
-                  <image :src="field.img[0].url" v-if="field.img.length"/>
-                  <span>{{ field.label }}</span>
-                </u-radio>
-              </u-radio-group>
-            </template>
-            <template v-if="(item.type === 'checkbox')">
-              <u-checkbox-group v-model="item.value" wrap>
-                <u-checkbox class="u-checkbox" disabled :name="field.label" v-for="(field, i) in item.options" :key="i">
-                  <image :src="field.img[0].url" v-if="field.img.length"/>
-                  <span>{{ field.label }}</span>
-                </u-checkbox>
-              </u-checkbox-group>
-            </template>
-            <template v-if="(item.type === 'select')">
-              <div class="components-item__select">
-                <span>{{ item.placeholder }}</span>
-                <u-icon name="arrow-down" color="#DEDFDF"/>
-              </div>
-            </template>
-            <template v-if="(item.type === 'upload')">
-              <div class="components-item__select components-item__textarea components-item__upload">
-                <image :src="`${$cdn}askform/upload.png`"/>
-                <span>选择图片（10M以内）</span>
-              </div>
-            </template>
-            <template v-if="(item.type === 'input')">
-              <div class="components-item__select">
-                <span>{{ item.placeholder }}</span>
-              </div>
-            </template>
-            <template v-if="(item.type === 'textarea')">
-              <div class="components-item__select components-item__textarea">
-                <span>{{ item.placeholder }}</span>
-              </div>
-            </template>
-          </div>
+          </template>
+          <template v-if="(item.type === 'upload')">
+            <div class="components-item__select components-item__textarea components-item__upload">
+              <image :src="`${$cdn}askform/upload.png`"/>
+              <span>选择图片（10M以内）</span>
+            </div>
+          </template>
+          <template v-if="(item.type === 'input')">
+            <div class="components-item__select">
+              <span>{{ item.placeholder }}</span>
+            </div>
+          </template>
+          <template v-if="(item.type === 'textarea')">
+            <div class="components-item__select components-item__textarea">
+              <span>{{ item.placeholder }}</span>
+            </div>
+          </template>
        </div>
-      </draggable>
-      <div class="add-form__btn" @click="isShow = true">
-        <image :src="`${$cdn}askform/add.png`"/>
-        <span>添加问题</span>
      </div>
-      <div class="add-form__footer">
-        <div class="add-form__footer--item-wrapper">
-          <div class="add-form__footer--item" @click="toPreview">
-            <image :src="`${$cdn}sass/preview.png`"/>
-            <span>预览</span>
-          </div>
-          <div class="add-form__footer--item" @click="toSetting">
-            <image :src="`${$cdn}sass/setting.png`"/>
-            <span>设置</span>
-          </div>
+    </draggable>
+    <div class="add-form__btn" @click="isShow = true">
+      <image :src="`${$cdn}askform/add.png`"/>
+      <span>添加问题</span>
+    </div>
+    <div class="add-form__footer">
+      <div class="add-form__footer--item-wrapper">
+        <div class="add-form__footer--item" @click="toPreview">
+          <image :src="`${$cdn}sass/preview.png`"/>
+          <span>预览</span>
+        </div>
+        <div class="add-form__footer--item" @click="toSetting">
+          <image :src="`${$cdn}sass/setting.png`"/>
+          <span>设置</span>
        </div>
-        <div @click="onConfirm">立即发布</div>
      </div>
-      <u-popup v-model="isShow" :closeable="false" mode="bottom" @close="isShow = false">
-        <div class="add-popup">
-          <div class="add-popup__title">
-            <h2>添加问题</h2>
-            <image :src="`${$cdn}askform/zk.png`" mode="aspectFit" @click="isShow = false"/>
-          </div>
-          <div class="add-popup__list">
-            <span @click="toFiledSetting('radio')">单选题</span>
-            <span @click="toFiledSetting('checkbox')">多选题</span>
-            <span @click="toFiledSetting('select')">单下拉框</span>
-            <span @click="toFiledSetting('input')">单行填空</span>
-            <span @click="toFiledSetting('textarea')">多行填空</span>
-            <span @click="toFiledSetting('upload')">上传图片</span>
-          </div>
+      <div @click="onConfirm">立即发布</div>
+    </div>
+    <u-popup v-model="isShow" :closeable="false" mode="bottom" @close="isShow = false">
+      <div class="add-popup">
+        <div class="add-popup__title">
+          <h2>添加问题</h2>
+          <image :src="`${$cdn}askform/zk.png`" mode="aspectFit" @click="isShow = false"/>
        </div>
-      </u-popup>
-
-    </div>
-    <div class="detail" v-if="isShowConfig">
-      <component
-          :is="component"
-          :index="filedIndex"
-          :filed="filed"
-          @change="onChange"
-          :targetListData="targetList"
-          :formData="form"
-          :filedType="filedType"
-          @back="isShowConfig = false"
-          :id="id"
-          :formConfig="formConfig">
-      </component>
-    </div>
+        <div class="add-popup__list">
+          <span @click="toFiledSetting('radio')">单选题</span>
+          <span @click="toFiledSetting('checkbox')">多选题</span>
+          <span @click="toFiledSetting('select')">单下拉框</span>
+          <span @click="toFiledSetting('input')">单行填空</span>
+          <span @click="toFiledSetting('textarea')">多行填空</span>
+          <span @click="toFiledSetting('upload')">上传图片</span>
+        </div>
+      </div>
+    </u-popup>
  </div>
 </template>

 <script>
 import draggable from 'vuedraggable'
-import FiledConfig from './FiledConfig'
-import FormSetting from '../FormSetting'
-import PreviewForm from './PreviewForm'
+import qs from "query-string"

 export default {
-  props: ['params'],
-
  data() {
    return {
      pageShow: false,
-      isShowConfig: false,
      form: {
        tableExplain: '详细描述',
        title: '问卷调查',
@@ -180,34 +158,23 @@ export default {
      filedIndex: '',
      isQuote: false,
      touchStart: 0,
-      component: '',
      formConfig: {}
    }
  },
-
  components: {
    draggable,
-    PreviewForm,
-    FormSetting,
-    FiledConfig
  },
-
-  mounted() {
-    this.type = Number(this.params.type)
-
-    if (this.params.isQuote) {
-      this.isQuote = true
-    }
-
-    if (this.params.id) {
-      this.id = this.params.id
-      this.getInfo(this.params.id)
+  created() {
+    let {type, isQuote, id} = this.$route.query
+    this.type = type
+    this.isQuote = !!isQuote
+    if (id) {
+      this.id = id
+      this.getInfo(id)
    } else {
      this.pageShow = true
    }
-
    this.init()
-
    uni.$on('setting', res => {
      this.form = {
        ...this.form,
@@ -224,21 +191,15 @@ export default {
      }
    })
  },
-
  methods: {
    toSetting() {
-      this.component = 'FormSetting'
-      this.isShowConfig = true
+      let {formConfig} = this
+      uni.navigateTo({url: `./FormSetting?${qs.stringify({formConfig})}`})
    },
-
    back() {
-      this.$emit('change', {
-        type: 'Tabbar'
-      })
+      uni.navigateBack({})
    },
-
    onChange(e) {
-
    },

    removeComponent(index) {
@@ -246,8 +207,9 @@ export default {
    },

    toPreview() {
-      this.component = 'PreviewForm'
-      this.isShowConfig = true
+      let {form, targetList} = this
+      localStorage.setItem("toPreviewForm", JSON.stringify({form, targetList}))
+      uni.navigateTo({url: `./PreviewForm`})
    },

    upload() {
@@ -340,18 +302,15 @@ export default {
        type: this.type,
        templateType: 0
      }).then(res => {
-        if (res.code == 0) {
-          setTimeout(() => {
-            this.$emit('change', {
-              type: 'Result',
-              params: {
-                linkUrl: res.data.linkUrl,
-                title: this.form.title,
-                tableExplain: this.form.tableExplain,
-                headPicture: this.form.headPicture
-              }
-            })
-          }, 600)
+        if (res?.code == 0) {
+          uni.navigateTo({
+            url: `./Result?${qs.stringify({
+              linkUrl: res.data.linkUrl,
+              title: this.form.title,
+              tableExplain: this.form.tableExplain,
+              headPicture: this.form.headPicture
+            })}`
+          })
        }
      }).catch(e => {
        this.$u.toast(e)
@@ -377,7 +336,6 @@ export default {
        } else {
          this.$u.toast(res.msg)
        }
-
        uni.hideLoading()
      }).catch(() => {
        uni.hideLoading()
@@ -389,16 +347,15 @@ export default {
      if (index > -1) {
        this.filed = type
        this.filedIndex = index
-        this.component = 'FiledConfig'
-        this.isShowConfig = true
-
-        return false
+        let {filed, filedType} = this
+        localStorage.setItem("toFiledConfig", JSON.stringify({index, filed, filedType}))
+      } else {
+        this.filedIndex = ''
+        this.filedType = type
+        let {filed, filedType} = this
+        localStorage.setItem("toFiledConfig", JSON.stringify({filed, filedType}))
      }
-
-      this.filedIndex = ''
-      this.filedType = type
-      this.component = 'FiledConfig'
-      this.isShowConfig = true
+      uni.navigateTo({url: `./FiledConfig`})
    },

    init() {
--- a/src/apps/AppAskForm/AppAskForm.vue
+++ b/src/apps/AppAskForm/AppAskForm.vue
@@ -1,13 +1,13 @@
 <template>
  <div class="form">
-    <component v-if="refresh" :is="component" @change="onChange" :params="params"/>
+    <component ref="TabPage" :is="component" @change="onChange" :params="params"/>
  </div>
 </template>

 <script>
 import Tabbar from './components/Tabbar.vue'
-import AddForm from './components/AddForm.vue'
-import Result from './components/Result.vue'
+import AddForm from './AddForm.vue'
+import Result from './Result.vue'
 import {mapActions} from "vuex";

 export default {
@@ -37,9 +37,8 @@ export default {
  },
  onShow() {
    document.title = "问卷表单"
-    this.refresh = false
+    this.$refs.TabPage?.show()
    this.$nextTick(() => {
-      this.refresh = true
      this.injectJWeixin(['sendChatMessage', 'selectEnterpriseContact', 'shareAppMessage', 'shareWechatMessage']).then(() => {
        this.$dict.load(['questionnaireStatus', 'questionnaireType', 'questionnaireFieldType'])
      })
--- a/src/apps/AppAskForm/components/FiledConfig.vue
+++ b/src/apps/AppAskForm/components/FiledConfig.vue
@@ -142,45 +142,35 @@
 </template>

 <script>
-import {components} from './config'
+import {components} from './components/config'

 export default {
-  props: ['filed', 'index', 'filedType'],
-
  data() {
+    let params = localStorage.getItem("toFiledConfig")
+    params && (params = JSON.parse(params))
+    localStorage.removeItem("toFiledConfig")
    return {
+      ...params,
      isShowType: false,
      isShowAnswer: false,
-      config: {}
    }
  },
-
-  mounted() {
-    if (this.index !== '') {
-      this.config = this.filed
-      return false
-    }
-
-    console.log(components)
-    this.config = JSON.parse(JSON.stringify(components.filter(v => v.type === this.filedType)[0]))
-  },
-
  computed: {
+    config() {
+      return !!this.index ? this.filed : JSON.parse(JSON.stringify(components.filter(v => v.type === this.filedType)[0]))
+    },
    pointTypeName() {
      if (!this.config.pointDict) return ''

      return this.config.pointDict.filter(v => v.dictValue === this.config.pointType)[0].dictName
    },
-
    defaultType() {
      if (!this.config.pointType) return [0]

      return [Number(this.config.pointType)]
    },
-
    defaultAnswer() {
      if (!this.config.answer) return [0]
-
      let index = 0
      if (this.config.answer) {
        this.config.options?.forEach((v, i) => {
@@ -193,7 +183,6 @@ export default {
      return [index]
    }
  },
-
  methods: {
    answerChange(e) {
      this.config.answer = e[0].label
@@ -266,7 +255,7 @@ export default {
    },

    back() {
-      this.$emit('back')
+      uni.navigateBack({})
    },

    confirm() {
@@ -274,7 +263,6 @@ export default {
        config: this.config,
        index: this.index === '' ? '-1' : this.index
      })
-
      this.back()
    },

--- a/src/apps/AppAskForm/components/PreviewForm.vue
+++ b/src/apps/AppAskForm/components/PreviewForm.vue
@@ -61,15 +61,16 @@
        </div>
      </div>
    </div>
-
  </div>
 </template>

 <script>

 export default {
-  props: ['formData', 'targetListData'],
  data() {
+    let params = localStorage.getItem("toPreviewForm")
+    params && (params = JSON.parse(params))
+    localStorage.removeItem("toPreviewForm")
    return {
      form: {
        tableExplain: '详细描述',
@@ -95,15 +96,10 @@ export default {
      isShow: false,
      type: 0,
      id: '',
-      touchStart: 0
+      touchStart: 0,
+      ...params
    }
  },
-
-  mounted() {
-    this.form = this.formData
-    this.targetList = this.targetListData
-  },
-
  methods: {
    getInfo(id) {
      uni.showLoading()
--- a/src/apps/AppAskForm/components/Result.vue
+++ b/src/apps/AppAskForm/components/Result.vue
@@ -33,14 +33,16 @@ import {mapActions} from 'vuex'
 export default {
  name: 'Result',

-  props: ['params'],
-
+  computed: {
+    params() {
+      return this.$route.query || {}
+    }
+  },
  mounted() {
    this.injectJWeixin(['sendChatMessage', 'selectEnterpriseContact'])
  },
  methods: {
    ...mapActions(['injectJWeixin', 'wxInvoke']),
-
    copy() {
      let oInput = document.createElement('input')
      oInput.value = this.params.linkUrl
@@ -50,7 +52,6 @@ export default {
      this.$u.toast('已复制')
      oInput.remove()
    },
-
    share() {
      this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
        this.wxInvoke(['shareAppMessage', {
@@ -61,7 +62,6 @@ export default {
        }])
      })
    },
-
    shareWechat() {
      this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
        this.wxInvoke(['shareWechatMessage', {
@@ -72,11 +72,8 @@ export default {
        }])
      })
    },
-
    confirm() {
-      this.$emit('change', {
-        type: 'Tabbar'
-      })
+      uni.navigateBack({})
    }
  },
  onShow() {
--- a/src/apps/AppAskForm/components/AddList.vue
+++ b/src/apps/AppAskForm/components/AddList.vue
@@ -26,6 +26,8 @@
 </template>

 <script>
+import qs from "query-string"
+
 export default {
  name: 'addList',
  label: '新建项目',
@@ -47,30 +49,16 @@ export default {
    }
  },

-  mounted() {
+  created() {
    this.getList()
  },
-
  methods: {
    toAdd(type) {
-      this.$emit('change', {
-        type: 'AddForm',
-        params: {
-          type
-        }
-      })
+      uni.navigateTo({url: `./AddForm?${qs.stringify({type})}`})
    },
-
    quote(id) {
-      this.$emit('change', {
-        type: 'AddForm',
-        params: {
-          id,
-          isQuote: 1
-        }
-      })
+      uni.navigateTo({url: `./AddForm?${qs.stringify({id, isQuote: 1})}`})
    },
-
    getList() {
      this.$http.post(`/app/appquestionnairetemplate/list`, null, {
        params: {
@@ -79,7 +67,7 @@ export default {
          size: 10000
        }
      }).then(res => {
-        if (res.code == 0) {
+        if (res?.code == 0) {
          this.list = res.data.records
        }
      })
--- a/src/apps/AppAskForm/components/Tabbar.vue
+++ b/src/apps/AppAskForm/components/Tabbar.vue
@@ -42,6 +42,14 @@ export default {
  methods: {
    onChange(e) {
      this.$emit('change', e)
+    },
+    show() {
+      if (this.currIndex == 0) {
+        this.currIndex = -1
+        this.$nextTick(() => {
+          this.currIndex = 0
+        })
+      }
    }
  },
  onReachBottom() {