his-answer/src/pages/Manager/index.vue

<template>
  <div class="manager-container">
    <div class="manager-components">
      <div class="card-attr">
        <div class="card-doc" style="flex: none;">
          <div class="card-header">
            <h3>操作面板</h3>
          </div>
          <transition name="collapse">
            <div class="card-body" v-if="attrShow.panel">
              <van-cell>
                <template #title>
                  <div class="panel-btns">
                    <van-button round plain type="primary" class="btn-item"
                      @click="addAttrData()">新增问卷</van-button>
                    <van-button round plain type="info" class="btn-item"
                      :disabled="!data"
                      @click="addItem()">新增题目</van-button>
                  </div>
                </template>
              </van-cell>
              <van-cell>
                <template #title>
                  <div class="panel-btns">
                    <van-button round type="primary" class="btn-item"
                      :disabled="!data"
                      @click="btnSubmit()">保存问卷</van-button>
                  </div>
                </template>
              </van-cell>
            </div>
          </transition>
        </div>
        <div class="card-doc">
          <div class="card-header" @click="attrShow.list = !attrShow.list">
            <h3>问卷列表</h3>
            <van-icon :name="attrShow.list ? 'arrow-up' : 'arrow-down'" class="icon" />
          </div>
          <transition name="collapse">
            <div class="card-body" v-if="attrShow.list">
              <div class="card-scroll">
                <van-loading v-if="loading.data" style="text-align: center; margin: 24px 0;">加载中...</van-loading>
                <van-list
                  v-model="listState.loading"
                  :finished="listState.finished"
                  finished-text="没有更多了"
                  @load="onLoadList"
                >
                  <van-cell 
                    v-for="item in list"
                    :key="item.id"
                    :title="item.name"
                    :label="`${item.id} | ${item.created} | ${item.modified}`"
                    icon="label-o"
                    :class="{
                      'manager-active': true,
                      'manager-active-cur': item.id === (data && data.topic.id)
                    }"
                    @click="inAttrData(item)" />
                </van-list>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div class="manager-template">
      <LayoutVolume :edata="data" :isEdit="true" :edataItem="dataItem" @selectItem="selectItem" />
    </div>
    <div class="manager-attribute">
      <div class="card-attr">
        <div class="card-doc" v-if="!!data">
          <div class="card-header" @click="attrShow.attr = !attrShow.attr">
            <h3>表单属性</h3>
            <van-icon :name="attrShow.attr ? 'arrow-up' : 'arrow-down'" class="icon" />
          </div>
          <transition name="collapse">
            <div class="card-body" v-if="attrShow.attr">
              <div class="card-scroll">
                <van-cell-group>
                  <van-field name="radio" label="主题">
                    <template #input>
                      <van-radio-group v-model="data.topic.layout_type" direction="horizontal">
                        <van-radio :name="1">主题1</van-radio>
                        <van-radio :name="2">主题2</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                  <van-field name="radio" label="显示标题">
                    <template #input>
                      <van-radio-group v-model="data.topic.is_name" direction="horizontal">
                        <van-radio :name="1">是</van-radio>
                        <van-radio :name="0">否</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                  <van-field v-model="data.topic.name" label="表单标题" placeholder="请输入" />
                  <van-field name="radio" label="显示描述">
                    <template #input>
                      <van-radio-group v-model="data.topic.is_memo" direction="horizontal">
                        <van-radio :name="1">是</van-radio>
                        <van-radio :name="0">否</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                  <van-field
                    v-model="data.topic.memo"
                    label="表单描述"
                    placeholder="请输入"
                    type="textarea"
                    rows="1"
                    autosize 
                  />
                  <van-field
                    v-model="data.topic.submessage"
                    label="提交消息"
                    placeholder="请输入"
                    type="textarea"
                    rows="1"
                    autosize 
                  />
                  <van-field name="radio" label="对齐方式">
                    <template #input>
                      <van-radio-group v-model="data.topic.layout_align" direction="horizontal">
                        <van-radio name="left">左对齐</van-radio>
                        <van-radio name="right">右对齐</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                  <van-field name="radio" label="排列方式">
                    <template #input>
                      <van-radio-group v-model="data.topic.layout_inline" direction="horizontal">
                        <van-radio :name="1">水平</van-radio>
                        <van-radio :name="2">垂直</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                </van-cell-group>
              </div>
            </div>
          </transition>
        </div>
        <div class="card-doc" v-if="!!dataItem">
          <div class="card-header" @click="attrShow.compt = !attrShow.compt">
            <h3>组件属性</h3>
            <van-icon :name="attrShow.compt ? 'arrow-up' : 'arrow-down'" class="icon" />
          </div>
          <transition name="collapse">
            <div class="card-body" v-if="attrShow.compt">
              <div class="card-scroll">
                <van-cell-group>
                  <van-field label="组件操作">
                    <template #input>
                      <van-button type="danger"
                        :disabled="!dataItem"
                        size="small"
                        @click="removeItem()">删除题目</van-button>
                    </template>
                  </van-field>
                  <van-field name="radio" label="组件类型">
                    <template #input>
                      <van-radio-group :value="dataItem.type" direction="horizontal">
                        <van-radio name="radio" @click="onChangeCompType('radio')">radio</van-radio>
                        <van-radio name="checkbox" @click="onChangeCompType('checkbox')">checkbox</van-radio>
                        <van-radio name="input" @click="onChangeCompType('input')">input</van-radio>
                        <van-radio name="textarea" @click="onChangeCompType('textarea')">textarea</van-radio>
                        <van-radio name="slider" @click="onChangeCompType('slider')">slider</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                  <van-field 
                    v-model="dataItem.title" 
                    label="组件题目" 
                    placeholder="请输入"
                    type="textarea"
                    rows="1"
                    autosize />
                  <van-field name="radio" label="是否必填">
                    <template #input>
                      <van-radio-group v-model="dataItem.required" direction="horizontal">
                        <van-radio :name="1">是</van-radio>
                        <van-radio :name="0">否</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                  <van-field 
                    :value="dataItem.content.map(item => `${item.title}${item.memo ? ' | ' : ''}${item.memo||''}`).join('\n')"
                    label="题目选项" 
                    placeholder="选项一 | 描述，Enter 编辑下个选项"
                    type="textarea"
                    rows="5"
                    autosize
                    @change="onChangeContent" />
                  <van-field name="radio" label="对齐方式">
                    <template #input>
                      <van-radio-group v-model="dataItem.layout_align" direction="horizontal">
                        <van-radio name="">继承</van-radio>
                        <van-radio name="left">靠左</van-radio>
                        <van-radio name="right">靠右</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                  <van-field name="radio" label="排列方式">
                    <template #input>
                      <van-radio-group v-model="dataItem.layout_inline" direction="horizontal">
                        <van-radio name="">继承</van-radio>
                        <van-radio :name="1">水平</van-radio>
                        <van-radio :name="2">垂直</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                </van-cell-group>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "./mixins";
import attribute from "./mixins/attribute";
export default {
  mixins: [mixins, attribute]
};
</script>
<style lang="scss" scoped>
@import "./common.scss";
@import "./style.scss";
</style>