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

<template>
  <div class="manager-container">
    <div class="manager-components">
      {{ dataItem }}
    </div>
    <div class="manager-template">
      <LayoutVolume :edata="data" :edataItem="dataItem" @selectItem="selectItem" />
    </div>
    <div class="manager-attribute">
      <div class="card-attr">
        <div class="card-doc">
          <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 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>