开发ing

src/App.vue

@@ -17,6 +17,9 @@ export default {
    width: 100%;
    overflow: hidden;
  }
+ textarea{
+   font-family: inherit;
+ }
  .loading{
    animation: loading 800ms infinite alternate;
  }

src/views/guide/index.vue

@@ -15,19 +15,29 @@ export default Vue.extend({
     title: {
       type: String,
       default: ''
+    },
+    placement: {
+      type: String,
+      default: 'left'
     }
   },
+  methods: {
+    isPicture(url) {
+      return /\.(jpg|jpeg|png|gif)$/.test(url)
+    }
+  }
 })
 </script>
 
 <template>
   <el-popover
     popper-class="popover"
-    placement="left"
+    :placement="placement"
     width="400"
     trigger="hover">
     <div class="guide-cont">
-      <video class="guide-video" autoplay loop :src="video" muted></video>
+      <img :src="video" class="guide-video" v-if="isPicture(video)" />
+      <video v-else class="guide-video" autoplay loop :src="video" muted/>
       <div class="title">{{title}}</div>
       <div class="text">{{text}}</div>
     </div>

src/views/preRegManage/edit.vue

@@ -29,9 +29,9 @@ export default Vue.extend({
           value: '',
           width: 1,
           options: [
-            { label: '东坡肉', value: '1' },
-            { label: '酱肘子', value: '2' },
-            { label: '白切鸡', value: '3' }
+            { label: '东坡肉', value: '东坡肉' },
+            { label: '酱肘子', value: '酱肘子' },
+            { label: '白切鸡', value: '白切鸡' }
           ],
           placeholder: '请选择'
         },
@@ -41,9 +41,9 @@ export default Vue.extend({
           value: '',
           width: 1,
           options: [
-            { label: '东坡肉', value: '1' },
-            { label: '酱肘子', value: '2' },
-            { label: '白切鸡', value: '3' }
+            { label: '东坡肉', value: '东坡肉' },
+            { label: '酱肘子', value: '酱肘子' },
+            { label: '白切鸡', value: '白切鸡' }
           ]
         },
         {
@@ -52,9 +52,9 @@ export default Vue.extend({
           value: '',
           width: 1,
           options: [
-            { label: '东坡肉', value: '1' },
-            { label: '酱肘子', value: '2' },
-            { label: '白切鸡', value: '3' }
+            { label: '东坡肉', value: '东坡肉' },
+            { label: '酱肘子', value: '酱肘子' },
+            { label: '白切鸡', value: '白切鸡' }
           ]
         },
         {
@@ -92,11 +92,29 @@ export default Vue.extend({
           placeholder: '请选择时间'
         },
         {
+          type: 'timeRange',
+          label: '请在下方选择时间范围',
+          value: '',
+          width: 2,
+          rangeSeparator: '至',
+          placeholder: '开始时间',
+          endPlaceholder: '结束时间'
+        },
+        {
           type: 'date',
           label: '请在下方选择日期',
           value: '',
           width: 2,
           placeholder: '请选择日期'
+        },
+        {
+          type: 'dateRange',
+          label: '请在下方选择日期范围',
+          value: '',
+          width: 2,
+          rangeSeparator: '至',
+          placeholder: '开始日期',
+          endPlaceholder: '结束日期'
         }
       ],
       formData: [],
@@ -108,7 +126,8 @@ export default Vue.extend({
       isDrag: false,
       currentKey: '',
       currentData: {},
-      hoverKey: ''
+      hoverKey: '',
+      selectInput: ''
     }
   },
   methods: {
@@ -116,6 +135,31 @@ export default Vue.extend({
       this.currentKey = element.key
       this.currentData = element
     },
+    removeComp(element) {
+      this.$confirm('确定删除吗？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        callback: action => {
+          if (action === 'confirm') {
+            let index = this.getIndexByKey(element.key)
+            this.formData.splice(index, 1)
+            this.currentKey = ''
+          }
+        }
+      })
+    },
+    addSelectItem() {
+      if (this.selectInput.length === 0) { return }
+      this.currentData.options.push({
+        label: this.selectInput,
+        value: this.selectInput
+      })
+      this.selectInput = ''
+    },
+    removeSelectItem(index) {
+      this.currentData.options.splice(index, 1)
+    },
     cloneItem(item) {
       const newItem = JSON.parse(JSON.stringify(item))
       newItem.key = newItem.type + new Date().getTime()
@@ -199,10 +243,18 @@ export default Vue.extend({
                 <div class="tips">{{ element.label }}</div>
                 <el-time-picker :value="element.value" :placeholder="element.placeholder" />
               </div>
+              <div v-if="element.type==='timeRange'" :class="[element.type,'form-item']">
+                <div class="tips">{{ element.label }}</div>
+                <el-time-picker is-range :value="element.value" :start-placeholder="element.placeholder" :end-placeholder="element.endPlaceholder" :range-separator="element.rangeSeparator" />
+              </div>
               <div v-if="element.type==='date'" :class="[element.type,'form-item']">
                 <div class="tips">{{ element.label }}</div>
                 <el-date-picker :value="element.value" :placeholder="element.placeholder" />
               </div>
+              <div v-if="element.type==='dateRange'" :class="[element.type,'form-item']">
+                <div class="tips">{{ element.label }}</div>
+                <el-date-picker :value="element.value" type="daterange" :start-placeholder="element.placeholder" :end-placeholder="element.endPlaceholder" :range-separator="element.rangeSeparator" />
+              </div>
             </div>
           </transition-group>
         </draggable>
@@ -259,10 +311,18 @@ export default Vue.extend({
                   <div class="tips">{{ element.label }}</div>
                   <el-time-picker :value="element.value" :placeholder="element.placeholder" />
                 </div>
+                <div v-if="element.type==='timeRange'" :class="[element.type,'view','form-item',{'active':element.key===hoverKey||element.key===currentKey}]">
+                  <div class="tips">{{ element.label }}</div>
+                  <el-time-picker is-range :value="element.value" :start-placeholder="element.placeholder" :end-placeholder="element.endPlaceholder" :range-separator="element.rangeSeparator" />
+                </div>
                 <div v-if="element.type==='date'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                   <div class="tips">{{ element.label }}</div>
                   <el-date-picker :value="element.value" :placeholder="element.placeholder" />
                 </div>
+                <div v-if="element.type==='dateRange'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
+                  <div class="tips">{{ element.label }}</div>
+                  <el-date-picker :value="element.value" type="daterange" :start-placeholder="element.placeholder" :end-placeholder="element.endPlaceholder" :range-separator="element.rangeSeparator" />
+                </div>
               </div>
             </transition-group>
           </draggable>
@@ -289,14 +349,114 @@ export default Vue.extend({
         </div>
         <div class="body">
 
-          <div class="tips">表单项介绍</div>
+          <div class="tips">
+            表单项介绍
+            <guide
+              video="/static/guide/表单项介绍.jpg"
+              title="表单项介绍"
+              text="展示在输入框上方的大段文本，用于介绍和提示该处应输入的内容。"
+            ></guide>
+          </div>
           <el-input v-model="currentData.label" type="textarea" placeholder="请输入表单项介绍"></el-input>
 
           <template v-if="['input','select','textarea','time','date'].includes(currentData.type)">
-            <div class="tips">提示文字</div>
+            <div class="tips">
+              提示文字
+              <guide
+                video="/static/guide/提示文字.jpg"
+                title="提示文字"
+                text="用户输入内容前，展示在输入框中的简短文本，用于提示该处应输入的内容。"
+              ></guide>
+            </div>
             <el-input v-model="currentData.placeholder" placeholder="请输入提示文字"></el-input>
           </template>
 
+          <template v-if="['timeRange','dateRange'].includes(currentData.type)">
+            <div class="tips">
+              起始提示文字
+              <guide
+                video="/static/guide/起始提示文字.jpg"
+                title="起始提示文字"
+                text="时间与日期类型组件输入内容前，显示在开始时间输入框中，用于提示的文字内容"
+              ></guide>
+            </div>
+            <el-input v-model="currentData.placeholder" placeholder="请输入起始提示文字"></el-input>
+            <div class="tips">
+              结束提示文字
+              <guide
+                video="/static/guide/结束提示文字.jpg"
+                title="结束提示文字"
+                text="时间与日期类型组件输入内容前，显示在结束时间输入框中，用于提示的文字内容"
+              ></guide>
+            </div>
+            <el-input v-model="currentData.endPlaceholder" placeholder="请输入结束提示文字"></el-input>
+            <div class="tips">
+              范围分隔符
+              <guide
+                video="/static/guide/范围分隔符.jpg"
+                title="范围分隔符"
+                text="时间与日期类型组件中，开始与结束提示文字中间的分隔文字。"
+              ></guide>
+            </div>
+            <el-input v-model="currentData.rangeSeparator" placeholder="请输入范围分隔符"></el-input>
+          </template>
+
+          <template v-if="['select','radio','checkbox'].includes(currentData.type)">
+            <div class="tips">
+              选项设定
+              <guide
+                video="/static/guide/选项设定.mp4"
+                title="选项设定"
+                text="在单选、多选、选择器组件中，编辑可供用户选择的选择项目。"
+              ></guide>
+            </div>
+            <div class="select-list">
+              <div class="item">
+                <draggable :options="{sort:true,animation:300}" v-model="currentData.options">
+                  <transition-group class="select-inner">
+                    <el-input v-for="(item,index) in currentData.options" :key="item.value" :value="item.label" disabled>
+                      <div slot="prefix" class="handel">⠿</div>
+                      <el-button type="danger" @click="removeSelectItem(index)" slot="append" icon="el-icon-delete"></el-button>
+                    </el-input>
+                  </transition-group>
+                </draggable>
+                <el-input v-model="selectInput" @keyup.enter.native="addSelectItem" placeholder="请输入选项">
+                  <el-button @click="addSelectItem" slot="append" icon="el-icon-plus"></el-button>
+                </el-input>
+              </div>
+            </div>
+          </template>
+
+          <template v-if="['number','slider'].includes(currentData.type)">
+            <div class="tips">
+              最小值
+              <guide
+                video="/static/guide/最小值.jpg"
+                title="最小值"
+                text="数字输入类型的组件中，限制可以输入的最小数字。"
+              ></guide>
+            </div>
+            <el-input v-model="currentData.min" @change="currentData.value=$event-0"/>
+            <div class="tips">
+              最大值
+              <guide
+                video="/static/guide/最大值.jpg"
+                title="最大值"
+                text="数字输入类型的组件中，限制可以输入的最大数字。"
+              ></guide>
+            </div>
+            <el-input v-model="currentData.max"/>
+            <div class="tips">
+              步进值
+              <guide
+                video="/static/guide/步进值.mp4"
+                title="步进值"
+                text="数字输入类型的组件中，限制输入的数字为多少的倍数。"
+              ></guide>
+            </div>
+            <el-input v-model="currentData.step"/>
+          </template>
+
           <div class="tips">
             组件宽度
             <guide
@@ -312,7 +472,7 @@ export default Vue.extend({
 
         </div>
         <div class="button">
-          <el-button type="danger">删除组件</el-button>
+          <el-button @click="removeComp(currentData)" type="danger">删除组件</el-button>
         </div>
       </template>
     </div>
@@ -364,12 +524,12 @@ export default Vue.extend({
           width: 100%;
         }
       }
-      &.time{
+      &.time,&.timeRange{
         .el-date-editor{
           width: 100%;
         }
       }
-      &.date{
+      &.date,&.dateRange{
         .el-date-editor{
           width: 100%;
         }
@@ -429,7 +589,7 @@ export default Vue.extend({
               position: sticky;
               left: 0;
               top: 0;
-              box-shadow: 0 0 6px 0 #00000022;
+               border: 1px solid lightgrey;
               height: 100%;
               .del{
                 position: absolute;
@@ -553,6 +713,19 @@ export default Vue.extend({
           margin-bottom: 6px;
           margin-top: 12px;
         }
+        .select-list{
+          width: 100%;
+          .handel{
+            height: 100%;
+            display: flex;
+            align-items: center;
+          }
+          .select-inner{
+            .el-input__inner{
+              cursor: grab;
+            }
+          }
+        }
       }
       .button{
         display: flex;