tianheng-ui 0.0.56 → 0.0.57

package/packages/formMaking/WidgetFormItem.vue

@@ -1,817 +0,0 @@
-<template>
-  <el-form-item
-    class="widget-view"
-    v-if="element && element.key"
-    :class="{
-      active: selectWidget.key == element.key,
-      is_req: element.options.required,
-      'widget-col': ['grid','tabs','table'].includes(element.type),
-      [element.model]: true
-    }"
-    :label="
-      data.type == 'table' || element.options.hideLabel ? '' : element.name
-    "
-    :label-width="
-      element.options.hideLabel
-        ? '0'
-        : element.options.isLabelWidth
-        ? `${element.options.labelWidth}px`
-        : ''
-    "
-    @click.native.stop="handleSelectWidget(index)"
-  >
-    <div v-if="data.type == 'table'">{{ element.name || "-" }}</div>
-
-    <template v-if="element.type == 'input'">
-      <el-input
-        v-model="element.options.defaultValue"
-        :style="{ width: element.options.width }"
-        :placeholder="element.options.placeholder"
-        :disabled="element.options.disabled"
-        :maxlength="element.options.maxlength"
-        :show-word-limit="element.options.showWordLimit"
-        :show-password="element.options.showPassword"
-        :clearable="element.options.clearable"
-        :suffix-icon="element.options.suffixIcon"
-        :prefix-icon="element.options.prefixIcon"
-      >
-        <template v-if="element.options.prepend" slot="prepend">
-          <span v-html="element.options.prepend"></span>
-        </template>
-        <template v-if="element.options.append" slot="append">
-          <span v-html="element.options.append"></span>
-        </template>
-      </el-input>
-    </template>
-
-    <template v-if="element.type == 'textarea'">
-      <el-input
-        type="textarea"
-        v-model="element.options.defaultValue"
-        :style="{ width: element.options.width }"
-        :disabled="element.options.disabled"
-        :placeholder="element.options.placeholder"
-        :maxlength="element.options.maxlength"
-        :show-word-limit="element.options.showWordLimit"
-        :clearable="element.options.clearable"
-        :autosize="{
-          minRows: element.options.minRows,
-          maxRows: element.options.maxRows
-        }"
-      ></el-input>
-    </template>
-
-    <template v-if="element.type == 'number'">
-      <el-input-number
-        v-model="element.options.defaultValue"
-        :disabled="element.options.disabled"
-        :controls-position="element.options.controlsPosition ? 'right' : ''"
-        :style="{ width: element.options.width }"
-        :min="element.options.min"
-        :max="element.options.max"
-        :step="element.options.step"
-        :precision="element.options.precision"
-      ></el-input-number>
-    </template>
-
-    <template v-if="element.type == 'radio'">
-      <el-radio-group
-        v-model="element.options.defaultValue"
-        :style="{ width: element.options.width }"
-        :disabled="element.options.disabled"
-      >
-        <template v-if="element.options.buttonType">
-          <el-radio-button
-            :style="{
-              display: element.options.inline ? 'inline-block' : 'block'
-            }"
-            :label="item.value"
-            :border="element.options.border"
-            v-for="(item, index) in element.options.options"
-            :key="item.value + index"
-          >
-            {{ element.options.showLabel ? item.label : item.value }}
-          </el-radio-button>
-        </template>
-        <template v-else>
-          <el-radio
-            :style="{
-              display: element.options.inline ? 'inline-block' : 'block'
-            }"
-            :label="item.value"
-            :border="element.options.border"
-            v-for="(item, index) in element.options.options"
-            :key="item.value + index"
-          >
-            {{ element.options.showLabel ? item.label : item.value }}
-          </el-radio>
-        </template>
-      </el-radio-group>
-    </template>
-
-    <template v-if="element.type == 'checkbox'">
-      <el-checkbox-group
-        v-model="element.options.defaultValue"
-        :style="{ width: element.options.width }"
-        :disabled="element.options.disabled"
-        :min="element.options.min"
-        :max="element.options.max"
-      >
-        <template v-if="element.options.buttonType">
-          <el-checkbox-button
-            :style="{
-              display: element.options.inline ? 'inline-block' : 'block'
-            }"
-            :label="item.value"
-            :border="element.options.border"
-            v-for="(item, index) in element.options.options"
-            :key="item.value + index"
-          >
-            {{ element.options.showLabel ? item.label : item.value }}
-          </el-checkbox-button>
-        </template>
-        <template v-else>
-          <el-checkbox
-            :style="{
-              display: element.options.inline ? 'inline-block' : 'block'
-            }"
-            :label="item.value"
-            :border="element.options.border"
-            v-for="(item, index) in element.options.options"
-            :key="item.value + index"
-          >
-            {{ element.options.showLabel ? item.label : item.value }}
-          </el-checkbox>
-        </template>
-      </el-checkbox-group>
-    </template>
-
-    <template v-if="element.type == 'time'">
-      <el-time-picker
-        v-if="element.options.timeType"
-        v-model="element.options.defaultValue"
-        :is-range="element.options.isRange"
-        :placeholder="element.options.placeholder"
-        :start-placeholder="element.options.startPlaceholder"
-        :end-placeholder="element.options.endPlaceholder"
-        :readonly="element.options.readonly"
-        :disabled="element.options.disabled"
-        :editable="element.options.editable"
-        :clearable="element.options.clearable"
-        :arrowControl="element.options.arrowControl"
-        :style="{ width: element.options.width }"
-      >
-      </el-time-picker>
-      <template v-else>
-        <el-time-select
-          v-model="element.options.selectStartTime"
-          :is-range="element.options.isRange"
-          :placeholder="
-            element.options.selectRange
-              ? element.options.startPlaceholder
-              : element.options.placeholder
-          "
-          :readonly="element.options.readonly"
-          :disabled="element.options.disabled"
-          :editable="element.options.editable"
-          :clearable="element.options.clearable"
-          :arrowControl="element.options.arrowControl"
-          :style="{ width: element.options.width }"
-          :picker-options="element.options.stretTimePickerOptions"
-        >
-        </el-time-select>
-        <el-time-select
-          v-if="element.options.selectRange"
-          v-model="element.options.selectEndTime"
-          :is-range="element.options.isRange"
-          :placeholder="element.options.endPlaceholder"
-          :readonly="element.options.readonly"
-          :disabled="element.options.disabled"
-          :editable="element.options.editable"
-          :clearable="element.options.clearable"
-          :arrowControl="element.options.arrowControl"
-          :style="{ width: element.options.width }"
-          :picker-options="element.options.endTimePickerOptions"
-        >
-        </el-time-select>
-      </template>
-    </template>
-
-    <template v-if="element.type == 'date'">
-      <el-date-picker
-        v-model="element.options.defaultValue"
-        :type="element.options.type"
-        :is-range="element.options.isRange"
-        :placeholder="element.options.placeholder"
-        :start-placeholder="element.options.startPlaceholder"
-        :end-placeholder="element.options.endPlaceholder"
-        :readonly="element.options.readonly"
-        :disabled="element.options.disabled"
-        :editable="element.options.editable"
-        :clearable="element.options.clearable"
-        :style="{ width: element.options.width }"
-      >
-      </el-date-picker>
-    </template>
-
-    <template v-if="element.type == 'rate'">
-      <el-rate
-        v-model="element.options.defaultValue"
-        :max="element.options.max"
-        :disabled="element.options.disabled"
-        :allow-half="element.options.allowHalf"
-        :show-text="element.options.showText"
-        :texts="element.options.auxiliaryValue"
-      ></el-rate>
-    </template>
-
-    <template v-if="element.type == 'color'">
-      <el-color-picker
-        v-model="element.options.defaultValue"
-        :disabled="element.options.disabled"
-        :show-alpha="element.options.showAlpha"
-      ></el-color-picker>
-    </template>
-
-    <template v-if="element.type == 'select'">
-      <el-select
-        v-model="element.options.defaultValue"
-        :disabled="element.options.disabled"
-        :multiple="element.options.multiple"
-        :collapseTags="element.options.collapseTags"
-        :allowCreate="element.options.allowCreate"
-        :clearable="element.options.clearable"
-        :placeholder="element.options.placeholder"
-        :style="{ width: element.options.width }"
-        :filterable="
-          element.options.allowCreate ? true : element.options.filterable
-        "
-      >
-        <el-option
-          v-for="item in element.options.options"
-          :key="item.value"
-          :value="item.value"
-          :label="element.options.showLabel ? item.label : item.value"
-        ></el-option>
-      </el-select>
-    </template>
-
-    <template v-if="element.type == 'switch'">
-      <el-switch
-        v-model="element.options.defaultValue"
-        :disabled="element.options.disabled"
-        :inactive-text="element.options.switchInactiveText"
-        :active-text="element.options.switchActiveText"
-        :inactive-color="element.options.switchInactiveColor"
-        :active-color="element.options.switchActiveColor"
-      >
-      </el-switch>
-    </template>
-
-    <template v-if="element.type == 'slider'">
-      <el-slider
-        v-model="element.options.defaultValue"
-        :min="element.options.min"
-        :max="element.options.max"
-        :disabled="element.options.disabled"
-        :step="element.options.step"
-        :show-input="element.options.showInput"
-        :range="element.options.range"
-        :style="{
-          width: element.options.width,
-          height: element.options.height
-        }"
-        :show-tooltip="element.options.showTooltip"
-        :format-tooltip="
-          val => formatTooltip(val, element.options.formatTooltip)
-        "
-        :show-stops="element.options.showStops"
-        :vertical="element.options.vertical"
-      ></el-slider>
-    </template>
-
-    <template v-if="element.type == 'imgupload'">
-      <!-- <fm-upload
-        v-model="element.options.defaultValue"
-        :disabled="element.options.disabled"
-        :style="{ width: element.options.width }"
-        :width="element.options.size.width"
-        :height="element.options.size.height"
-        token="xxx"
-        domain="xxx"
-      >
-      </fm-upload> -->
-
-      <el-upload
-        class="upload-demo"
-        :action="element.options.remoteFunc"
-        :on-preview="
-          file => handlePictureCardPreview(file, element.options.listType)
-        "
-        :on-remove="handleRemove"
-        :multiple="element.options.multiple"
-        :limit="element.options.length"
-        :width="element.options.size.width"
-        :height="element.options.size.height"
-        :list-type="element.options.listType"
-        :file-list="element.options.defaultValue"
-        :drag="element.options.drag"
-        :on-change="handleAvatar"
-        :on-error="handleAvatarError"
-        :disabled="element.options.disabled"
-      >
-        <el-button
-          size="small"
-          type="primary"
-          :disabled="element.options.disabled"
-          v-if="
-            ['default', 'picture'].includes(element.options.listType) &&
-              !element.options.drag
-          "
-          >点击上传</el-button
-        >
-        <i
-          slot="default"
-          class="el-icon-plus"
-          v-if="
-            element.options.listType === 'picture-card' && !element.options.drag
-          "
-        ></i>
-        <i class="el-icon-upload" v-if="element.options.drag"></i>
-        <div class="el-upload__text" v-if="element.options.drag">
-          将文件拖到此处，或<em>点击上传</em>
-        </div>
-        <div
-          slot="tip"
-          class="el-upload__tip"
-          v-html="element.options.elUploadTip"
-        ></div>
-      </el-upload>
-    </template>
-
-    <template v-if="element.type == 'cascader'">
-      <el-cascader
-        v-model="element.options.defaultValue"
-        :disabled="element.options.disabled"
-        :clearable="element.options.clearable"
-        :placeholder="element.options.placeholder"
-        :style="{ width: element.options.width }"
-        :options="element.options.remoteOptions"
-        :props="element.options.props"
-        :show-all-levels="element.options.showAllLevels ? false : true"
-        :collapse-tags="element.options.collapseTags"
-      >
-        <template slot-scope="{ data }">
-          <span v-html="element.options.prepend"></span>
-          <span>{{ data.label }}</span>
-          <span v-html="element.options.append"></span>
-        </template>
-      </el-cascader>
-    </template>
-
-    <template v-if="element.type == 'editor'">
-      <vue-editor
-        v-model="element.options.defaultValue"
-        :style="{
-          width: element.options.width,
-          height: element.options.height
-        }"
-        :disabled="element.options.disabled"
-      >
-      </vue-editor>
-    </template>
-
-    <template v-if="element.type == 'blank'">
-      <div
-        style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;"
-      >
-        自定义区域
-      </div>
-    </template>
-
-    <template v-if="element.type == 'text'">
-      <span>{{ element.options.defaultValue }}</span>
-    </template>
-
-    <template v-if="element.type == 'grid'">
-      <el-row
-        type="flex"
-        :class="{ active: selectWidget.key == element.key }"
-        :gutter="element.options.gutter ? element.options.gutter : 0"
-        :justify="element.options.justify"
-        :align="element.options.align"
-        @click.native="handleSelectWidget(index)"
-      >
-        <el-col
-          v-for="(col, colIndex) in element.columns"
-          :key="colIndex"
-          :span="col.span ? col.span : 0"
-        >
-          <draggable
-            v-model="col.list"
-            :no-transition-on-drag="true"
-            v-bind="{
-              group: 'people',
-              ghostClass: 'ghost',
-              animation: 200,
-              handle: '.drag-widget'
-            }"
-            @end="handleMoveEnd"
-            @add="handleWidgetColAdd($event, element, colIndex)"
-          >
-            <transition-group name="fade" tag="div" class="widget-col-list">
-              <template v-for="(el, i) in col.list">
-                <widget-form-item
-                  :key="el.key"
-                  v-if="el.key"
-                  :element="el"
-                  :select.sync="selectWidget"
-                  :index="i"
-                  :data="col"
-                >
-                </widget-form-item>
-              </template>
-            </transition-group>
-          </draggable>
-        </el-col>
-      </el-row>
-    </template>
-
-    <template v-if="element.type == 'table'">
-      <draggable
-        v-model="element.list"
-        :no-transition-on-drag="true"
-        v-bind="{
-          group: 'people',
-          ghostClass: 'ghost',
-          animation: 200,
-          handle: '.drag-widget'
-        }"
-        @end="handleMoveEnd"
-        @add="handleWidgetTableAdd($event, element)"
-      >
-        <transition-group name="fade" tag="div" class="widget-table-list">
-          <template v-for="(el, i) in element.list">
-            <widget-form-item
-              class="widget-table-list-item"
-              :key="el.key"
-              v-if="el.key"
-              :element="el"
-              :select.sync="selectWidget"
-              :index="i"
-              :data="element"
-            >
-            </widget-form-item>
-          </template>
-        </transition-group>
-      </draggable>
-    </template>
-
-    <template v-if="element.type == 'tabs'">
-      <el-tabs
-        v-model="element.options.defaultValue"
-        :type="element.options.type"
-        :tab-position="element.options.tabPosition"
-      >
-        <el-tab-pane
-          v-for="(tabItem, tabIndex) in element.tabs"
-          :key="tabItem.value"
-          :label="tabItem.label"
-          :name="tabItem.value"
-        >
-          <draggable
-            v-model="tabItem.list"
-            :no-transition-on-drag="true"
-            v-bind="{
-              group: 'people',
-              ghostClass: 'ghost',
-              animation: 200,
-              handle: '.drag-widget'
-            }"
-            @end="handleMoveEnd"
-            @add="handleWidgetTabAdd($event, element, tabIndex)"
-          >
-            <transition-group name="fade" tag="div" class="widget-col-list">
-              <template v-for="(el, i) in tabItem.list">
-                <widget-form-item
-                  v-if="el && el.key"
-                  :key="el.key"
-                  :element="el"
-                  :select.sync="selectWidget"
-                  :index="i"
-                  :data="tabItem"
-                ></widget-form-item>
-              </template>
-            </transition-group>
-          </draggable>
-        </el-tab-pane>
-      </el-tabs>
-    </template>
-
-    <template v-if="element.type == 'divider'">
-      <el-divider :content-position="element.options.contentPosition">
-        {{ element.name }}
-      </el-divider>
-    </template>
-
-    <div class="widget-view-action" v-if="selectWidget.key == element.key">
-      <i
-        class="iconfont icon-icon_clone"
-        @click.stop="handleWidgetClone(index)"
-      ></i>
-      <i
-        class="iconfont icon-trash"
-        @click.stop="handleWidgetDelete(index)"
-      ></i>
-    </div>
-
-    <div class="widget-view-drag" v-if="selectWidget.key == element.key">
-      <i class="iconfont icon-drag drag-widget"></i>
-    </div>
-
-    <el-dialog :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="" />
-    </el-dialog>
-  </el-form-item>
-</template>
-
-<script>
-import Draggable from "vuedraggable";
-import FmUpload from "./Upload";
-import { VueEditor } from "vue2-editor";
-export default {
-  name: "widget-form-item",
-  props: ["element", "select", "index", "data"],
-  components: { Draggable, FmUpload, VueEditor },
-  data() {
-    return {
-      selectWidget: this.select,
-      dialogVisible: false,
-      dialogImageUrl: "",
-      config: {}
-    };
-  },
-  mounted() {
-    if (this.element.type == "tabs") {
-      this.config[this.element.model] = this.element.options.defaultValue;
-    }
-  },
-  methods: {
-    handleSelectWidget(index) {
-      this.selectWidget = this.data.list[index];
-    },
-    handleWidgetDelete(index) {
-      if (this.data.list.length - 1 === index) {
-        if (index === 0) {
-          this.selectWidget = {};
-        } else {
-          this.selectWidget = this.data.list[index - 1];
-        }
-      } else {
-        this.selectWidget = this.data.list[index + 1];
-      }
-
-      this.$nextTick(() => {
-        this.data.list.splice(index, 1);
-      });
-    },
-    formatTooltip(val, num) {
-      return val / num;
-    },
-    handleWidgetClone(index) {
-      const key =
-        Date.parse(new Date().toString()) +
-        "_" +
-        Math.ceil(Math.random() * 99999);
-      let cloneData = {
-        ...this.data.list[index],
-        options: {
-          ...this.data.list[index].options,
-          remoteFunc: "func_" + key
-        },
-        key,
-        model: this.data.list[index].type + "_" + key,
-        rules: this.data.list[index].rules || []
-      };
-
-      if (
-        this.data.list[index].type === "radio" ||
-        this.data.list[index].type === "checkbox" ||
-        this.data.list[index].type === "select"
-      ) {
-        cloneData = {
-          ...cloneData,
-          options: {
-            ...cloneData.options,
-            options: cloneData.options.options.map(item => ({ ...item }))
-          }
-        };
-      }
-
-      this.data.list.splice(index, 0, cloneData);
-
-      this.$nextTick(() => {
-        this.selectWidget = this.data.list[index + 1];
-      });
-    },
-    handlePictureCardPreview(file, listType) {
-      if (listType === "picture-card") {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      }
-    },
-    handleRemove(file, fileList) {
-      this.data.options.defaultValue = fileList;
-    },
-    handleAvatar(res, file) {
-      this.data.options.defaultValue = file;
-    },
-    handleAvatarError() {
-      console.log("上传失败！");
-    },
-    handleMoveEnd({ newIndex, oldIndex }) {},
-    handleWidgetColAdd($event, row, colIndex) {
-      const newIndex = $event.newIndex;
-      const oldIndex = $event.oldIndex;
-      const item = $event.item;
-
-      // 防止布局元素的嵌套拖拽
-      if (item.className.indexOf("data-grid") >= 0) {
-        // 如果是列表中拖拽的元素需要还原到原来位置
-        item.tagName === "DIV" &&
-          this.data.list.splice(
-            oldIndex,
-            0,
-            row.columns[colIndex].list[newIndex]
-          );
-
-        row.columns[colIndex].list.splice(newIndex, 1);
-
-        return false;
-      }
-
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-
-      this.$set(row.columns[colIndex].list, newIndex, {
-        ...row.columns[colIndex].list[newIndex],
-        options: {
-          ...row.columns[colIndex].list[newIndex].options
-          // remoteFunc: "func_" + key
-        },
-        key,
-        // 绑定键值
-        model: row.columns[colIndex].list[newIndex].type + "_" + key,
-        rules: []
-      });
-
-      if (
-        row.columns[colIndex].list[newIndex].type === "radio" ||
-        row.columns[colIndex].list[newIndex].type === "checkbox" ||
-        row.columns[colIndex].list[newIndex].type === "select"
-      ) {
-        this.$set(row.columns[colIndex].list, newIndex, {
-          ...row.columns[colIndex].list[newIndex],
-          options: {
-            ...row.columns[colIndex].list[newIndex].options,
-            options: row.columns[colIndex].list[newIndex].options.options.map(
-              item => ({
-                ...item
-              })
-            )
-          }
-        });
-      }
-
-      this.selectWidget = row.columns[colIndex].list[newIndex];
-    },
-    handleWidgetTabAdd($event, row, colIndex) {
-      const newIndex = $event.newIndex;
-      const oldIndex = $event.oldIndex;
-      const item = $event.item;
-
-      // 防止布局元素的嵌套拖拽
-      if (item.className.indexOf("data-grid") >= 0) {
-        // 如果是列表中拖拽的元素需要还原到原来位置
-        item.tagName === "DIV" &&
-          this.data.list.splice(oldIndex, 0, row.tabs[colIndex].list[newIndex]);
-
-        row.tabs[colIndex].list.splice(newIndex, 1);
-
-        return false;
-      }
-
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-
-      this.$set(row.tabs[colIndex].list, newIndex, {
-        ...row.tabs[colIndex].list[newIndex],
-        options: {
-          ...row.tabs[colIndex].list[newIndex].options
-          // remoteFunc: "func_" + key
-        },
-        key,
-        // 绑定键值
-        model: row.tabs[colIndex].list[newIndex].type + "_" + key,
-        rules: []
-      });
-
-      if (
-        row.tabs[colIndex].list[newIndex].type === "radio" ||
-        row.tabs[colIndex].list[newIndex].type === "checkbox" ||
-        row.tabs[colIndex].list[newIndex].type === "select"
-      ) {
-        this.$set(row.tabs[colIndex].list, newIndex, {
-          ...row.tabs[colIndex].list[newIndex],
-          options: {
-            ...row.tabs[colIndex].list[newIndex].options,
-            options: row.tabs[colIndex].list[newIndex].options.options.map(
-              item => ({
-                ...item
-              })
-            )
-          }
-        });
-      }
-
-      if (row.tabs[colIndex].list[newIndex].type === "grid") {
-        this.$set(
-          row.tabs[colIndex].list,
-          newIndex,
-          JSON.parse(JSON.stringify(row.tabs[colIndex].list[newIndex]))
-        );
-      }
-
-      if (row.tabs[colIndex].list[newIndex].type === "table") {
-        this.$set(row.tabs[colIndex].list, newIndex, {
-          ...row.tabs[colIndex].list[newIndex],
-          list: row.tabs[colIndex].list[newIndex].list.map(item => ({
-            ...item
-          }))
-        });
-      }
-
-      this.selectWidget = row.tabs[colIndex].list[newIndex];
-    },
-    handleWidgetTableAdd($event, row) {
-      const newIndex = $event.newIndex;
-      const oldIndex = $event.oldIndex;
-      const item = $event.item;
-      // 防止布局元素的嵌套拖拽
-      if (item.className.indexOf("no-put") >= 0) {
-        // 如果是列表中拖拽的元素需要还原到原来位置
-        item.tagName === "DIV" &&
-          this.data.list.splice(oldIndex, 0, row.list[newIndex]);
-
-        row.list.splice(newIndex, 1);
-
-        return false;
-      }
-
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-
-      this.$set(row.list, newIndex, {
-        ...row.list[newIndex],
-        options: {
-          ...row.list[newIndex].options
-          // remoteFunc: "func_" + key
-        },
-        key,
-        // 绑定键值
-        model: row.list[newIndex].type + "_" + key,
-        rules: []
-      });
-
-      if (
-        row.list[newIndex].type === "radio" ||
-        row.list[newIndex].type === "checkbox" ||
-        row.list[newIndex].type === "select"
-      ) {
-        this.$set(row.list, newIndex, {
-          ...row.list[newIndex],
-          options: {
-            ...row.list[newIndex].options,
-            options: row.list[newIndex].options.options.map(item => ({
-              ...item
-            }))
-          }
-        });
-      }
-
-      this.selectWidget = row.list[newIndex];
-    }
-  },
-  watch: {
-    select(val) {
-      this.selectWidget = val;
-    },
-    selectWidget: {
-      handler(val) {
-        this.$emit("update:select", val);
-      },
-      deep: true
-    }
-  }
-};
-</script>