vue2-client 1.6.63-single → 1.6.64-single

package/src/base-client/components/common/CreateQuery/CreateQuery.vue

@@ -1,669 +1,669 @@
-<template>
-  <a-drawer
-    title="查询配置生成"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <a-row :gutter="24">
-      <a-col :lg="12" :md="12" :sm="24" :xl="18" :xs="24">
-        <a-form-model
-          ref="businessCreateForm"
-          :label-col="labelCol"
-          :model="form"
-          :rules="rules"
-          :wrapper-col="wrapperCol"
-        >
-          <a-form-model-item label="服务名称" prop="serviceName">
-            <a-input v-model="form.serviceName" placeholder="查询接口所在的服务名称，默认af-system"/>
-          </a-form-model-item>
-          <a-form-model-item label="查询主表名" prop="tableName">
-            <a-input v-model="form.tableName" placeholder="查询用的主表+别名，用空格隔开，如：t_userfiles u"/>
-          </a-form-model-item>
-          <a-form-model-item label="预设关联表" prop="joinArray">
-            <a-popover placement="right" title="说明">
-              <template slot="content">
-                <p>配置你的查询中可能涉及到的所有关联表</p>
-                <p>比如你的查询中涉及到了t_userinfo表，就需要加入t_userinfo表的关联，和你写SQL的关联一样</p>
-                <p>请注意，你关联的<span style="color: #ff0000">除主表外的任何表</span>都需要配置</p>
-                <a-input-group compact style="width: 400px;">
-                  <a-input placeholder="表别名" readOnly style="width: 20%"/>
-                  <a-input placeholder="关联条件" readOnly style="width: 80%"/>
-                </a-input-group>
-                <a-input-group compact style="width: 400px;">
-                  <a-input placeholder="表别名" readOnly style="width: 20%" value="ui"/>
-                  <a-input
-                    placeholder="关联条件"
-                    readOnly
-                    style="width: 80%"
-                    value="t_userinfo ui on i.f_userinfo_id = ui.f_userinfo_id"/>
-                </a-input-group>
-              </template>
-              <a-button type="primary" @click="addJoinItem()">增加</a-button>
-            </a-popover>
-            <div v-for="(itemObj, index) in joinArray" :key="index">
-              <a-input-group compact>
-                <a-input
-                  v-model="itemObj.key"
-                  placeholder="表别名"
-                  style="width: 20%;position: relative;bottom: 1px;"
-                  @change="changeJoinArray()"/>
-                <a-input v-model="itemObj.value" placeholder="关联条件" style="width: 80%" @change="changeJoinArray()">
-                  <a-icon slot="addonAfter" type="close" @click="removeJoinItem(index)"/>
-                </a-input>
-              </a-input-group>
-            </div>
-          </a-form-model-item>
-          <a-form-model-item label="SQL查询表达式" prop="condition">
-            <a-input v-model="form.condition.value" placeholder="用作SQL查询的固定条件表达式，如：gb.f_meter_type='物联网表'，可选"/>
-            <template v-if="form.condition.value && Object.keys(form.joinArray).length > 0">
-              <a-alert message="提示：如果SQL查询表达式中用到了关联表，需要勾选用到的关联表别名" type="success"/>
-              <a-checkbox-group v-model="form.condition.join" :options="conditionJoinArray"/>
-            </template>
-          </a-form-model-item>
-          <a-form-model-item label="排序方式" prop="orderBy">
-            <a-input v-model="form.orderBy" placeholder="排序字段，用别名+字段名+排序方式(可选)表示，如：u.id desc"/>
-          </a-form-model-item>
-          <a-form-model-item label="数据字段" prop="column">
-            <a-space>
-              <a-button type="primary" @click="addColumnItem()">增加</a-button>
-              <a-button icon="import" @click="$message.warn('从创意库中选择并引用高质量的通用表单项配置，敬请期待')">从创意库引入</a-button>
-            </a-space>
-            <a-row :gutter="24">
-              <a-col :span="8">
-                <span style="font-weight: bold">
-                  标签名
-                </span>
-              </a-col>
-              <a-col :span="7">
-                <span style="font-weight: bold">
-                  字段名
-                </span>
-              </a-col>
-              <a-col :span="7">
-                <span style="font-weight: bold">
-                  数据模式
-                </span>
-              </a-col>
-              <a-col :span="2">
-                <span style="font-weight: bold">
-                  操作
-                </span>
-              </a-col>
-            </a-row>
-            <a-divider style="margin: 6px 0" />
-            <div
-              v-for="(columnItem, index) in form.column"
-              :key="index"
-              class="column_item"
-              draggable="true"
-              @dragend="handleDragEnd($event, columnItem)"
-              @dragenter="handleDragEnter($event, columnItem)"
-              @dragstart="handleDragStart($event, columnItem)"
-              @dragover.prevent="handleDragOver($event, columnItem)">
-              <a-row v-if="ending && dragging && columnItem.key === ending.key && dragging.key !== ending.key" class="dragTipsWarp">
-                <span class="dragTips">拖到此处放置</span>
-              </a-row>
-              <a-row :gutter="24">
-                <a-col :span="8">
-                  <span style="font-weight: bold">
-                    {{ columnItem.title }}
-                  </span>
-                </a-col>
-                <a-col :span="7">
-                  <span style="font-weight: bold">
-                    {{ columnItem.key }}
-                  </span>
-                </a-col>
-                <a-col :span="7">
-                  <a-tooltip>
-                    <template slot="title">
-                      查询表单项
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray.includes('queryForm') ? 'blue' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="file-search" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      表格列
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray.includes('table') ? 'orange' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="table" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      新增/修改表单项
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray.includes('addOrEditForm') ? 'green' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="form" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      SQL查询项
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray.includes('sqlQueryItem') ? 'cyan' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="bars" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      SQL查询表达式
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray.includes('sqlQueryCondition') ? 'purple' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="search" /></a-tag>
-                  </a-tooltip>
-                </a-col>
-                <a-col :span="1">
-                  <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
-                </a-col>
-                <a-col :span="1">
-                  <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
-                </a-col>
-              </a-row>
-            </div>
-          </a-form-model-item>
-          <a-form-model-item label="操作按钮配置" prop="buttonState">
-            <a-checkbox-group v-model="buttonStateData" :options="buttonStateArray"/>
-          </a-form-model-item>
-          <a-form-model-item label="接口插槽" prop="apiSlot">
-            <a-popover placement="right" title="说明">
-              <template slot="content">
-                <p>通过插槽，你可以轻松扩展查询配置的默认业务，配置的插槽会根据类型在默认业务的前后执行，类似于切面</p>
-                <p><span style="color: #FF0000">注意：插槽不应改变默认的业务行为</span></p>
-                <p>如果配置了业务执行前插槽,<br/>执行默认业务前会先执行设置的插槽logic，传给插槽的参数为data本身</p>
-                <p>如果配置了业务执行后插槽,<br/>执行默认业务后会执行设置的插槽logic，传给插槽的参数为默认业务的返回值</p>
-                <img src="@vue2-client/assets/img/querySlotDemo.svg" style="zoom:0.5">
-              </template>
-              <a-button type="primary" @click="addApiSlot()">增加</a-button>
-            </a-popover>
-            <div
-              v-for="(columnItem, index) in form.apiSlotView"
-              :key="index"
-            >
-              <a-input v-model="columnItem.slotName" placeholder="插槽logic名称">
-                <a-select slot="addonBefore" v-model="columnItem.slotType" style="width: 10rem" placeholder="选择插槽类型">
-                  <a-select-option
-                    v-for="item in apiSlotData"
-                    :key="item.value"
-                    :value="item.value">
-                    {{ item.label }}
-                  </a-select-option>
-                </a-select>
-                <a-icon slot="addonAfter" type="close" @click="removeApiSlotItem(index)"/>
-              </a-input>
-            </div>
-          </a-form-model-item>
-        </a-form-model>
-        <create-query-item ref="queryItem" @getColumn="getColumn" @itemHandle="itemHandle"/>
-        <a-button type="primary" @click="view">操作</a-button>
-      </a-col>
-      <a-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
-        <a-card :bordered="false" size="small" style="overflow: auto" title="预览">
-          <json-viewer
-            :copyable="{copyText: '复制', copiedText: '已复制'}"
-            :expand-depth="parseInt('100')"
-            :value="result"
-            style="overflow: auto;max-height: 440px"></json-viewer>
-        </a-card>
-      </a-col>
-    </a-row>
-    <a-modal
-      :centered="true"
-      :destroyOnClose="true"
-      :visible="modelVisible"
-      :width="isMobile ? screenWidth : screenWidth * 0.8"
-      :zIndex="1001"
-      title="效果预览"
-      @cancel="onModelClose">
-      <template slot="footer">
-        <a-button key="close" @click="onModelClose">
-          返回
-        </a-button>
-        <a-button key="submit" type="primary" @click="submit">
-          保存
-        </a-button>
-      </template>
-      <x-form-table
-        :queryParamsJson="result"
-        :view-mode="true">
-      </x-form-table>
-    </a-modal>
-  </a-drawer>
-</template>
-
-<script>
-import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
-import JsonViewer from 'vue-json-viewer'
-import FileSaver from 'file-saver'
-import { mapState } from 'vuex'
-import CreateQueryItem from '@vue2-client/base-client/components/common/CreateQuery/CreateQueryItem'
-
-export default {
-  name: 'CreateQuery',
-  components: {
-    CreateQueryItem,
-    JsonViewer,
-    XFormTable,
-    XFormItem
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 效果预览模态框是否展示
-      modelVisible: false,
-      // 操作按钮状态集合
-      buttonStateArray: [
-        { label: '新增', value: 'add' },
-        { label: '修改', value: 'edit' },
-        { label: '删除', value: 'delete' },
-        { label: '导入', value: 'import' },
-        { label: '导出', value: 'export' }
-      ],
-      // 操作按钮状态集合值
-      buttonStateData: ['add', 'edit', 'delete', 'import', 'export'],
-      labelCol: { span: 3 },
-      wrapperCol: { span: 18 },
-      form: {
-        serviceName: '',
-        tableName: '',
-        joinArray: {},
-        condition: {},
-        orderBy: '',
-        column: [],
-        apiSlotView: [],
-        apiSlot: {},
-      },
-      result: {},
-      itemMap: {},
-      selectIndex: null,
-      selectType: undefined,
-      joinArray: [],
-      rules: {
-        tableName: [{ required: true, message: '请输入查询表名', trigger: 'blur' }],
-        orderBy: [{ required: true, message: '请输入排序方式', trigger: 'blur' }]
-      },
-      ending: null,
-      dragging: null,
-      // 操作按钮状态集合
-      apiSlotData: [
-        { label: '查询前插槽', value: 'queryBefore' },
-        { label: '查询后插槽', value: 'queryAfter' },
-        { label: '删除前插槽', value: 'delBefore' },
-        { label: '删除后插槽', value: 'delAfter' },
-        { label: '获取行信息前插槽', value: 'editQueryBefore' },
-        { label: '获取行信息后插槽', value: 'editQueryAfter' },
-        { label: '新增/修改保存前插槽', value: 'addOrEditSaveBefore' },
-        { label: '新增/修改保存后插槽', value: 'addOrEditSaveAfter' },
-      ]
-    }
-  },
-  mounted () {
-    this.initView()
-  },
-  computed: {
-    ...mapState('setting', ['isMobile']),
-    conditionJoinArray: function () {
-      const result = []
-      for (const item in this.form.joinArray) {
-        if (item !== '') {
-          result.push({
-            label: item,
-            value: item
-          })
-        }
-      }
-      if (result.length === 0) {
-        result.push({
-          label: '-',
-          value: '-'
-        })
-      }
-      return result
-    },
-    buttonState: function () {
-      const result = {
-        add: false,
-        edit: false,
-        delete: false,
-        export: false
-      }
-      for (const item of this.buttonStateData) {
-        result[item] = true
-      }
-      return result
-    }
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    toEditJson: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  watch: {
-    visible (rel) {
-      if (rel) {
-        this.initView()
-      }
-      if (rel && this.toEditJson) {
-        // 处理预设关联表
-        if (this.joinArray.length === 0) {
-          for (const key in this.toEditJson.joinArray) {
-            this.joinArray.push({
-              key: key,
-              value: this.toEditJson.joinArray[key]
-            })
-          }
-        }
-        // apiSlot obj to arr
-        if (this.toEditJson.apiSlot) {
-          this.toEditJson.apiSlotView = []
-          for (const key of Object.keys(this.toEditJson.apiSlot)) {
-            this.toEditJson.apiSlotView.push({ slotType: key, slotName: this.toEditJson.apiSlot[key] })
-          }
-        }
-        // 处理具体表单项
-        this.form = Object.assign(
-          {
-            tableName: '',
-            joinArray: {},
-            condition: {},
-            orderBy: '',
-            apiSlotView: [],
-            apiSlot: {},
-            column: []
-          }, this.toEditJson
-        )
-        for (const columnItem of this.form.column) {
-          // 数据模式兼容性处理
-          if (!(columnItem.dataMode || columnItem.dataModeArray)) {
-            columnItem.dataModeArray = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
-          } else if (columnItem.dataMode) {
-            if (columnItem.dataMode === 'all') {
-              columnItem.dataModeArray = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
-            } else if (columnItem.dataMode === 'form') {
-              columnItem.dataModeArray = ['queryForm', 'addOrEditForm', 'sqlQueryCondition']
-            } else if (columnItem.dataMode === 'table') {
-              columnItem.dataModeArray = ['table', 'sqlQueryItem']
-            } else if (columnItem.dataMode === 'table_form') {
-              columnItem.dataModeArray = ['table', 'sqlQueryItem', 'sqlQueryCondition']
-            } else if (columnItem.dataMode === 'only_form') {
-              columnItem.dataModeArray = ['queryForm']
-            } else if (columnItem.dataMode === 'only_table') {
-              columnItem.dataModeArray = ['table']
-            } else if (columnItem.dataMode === 'clear') {
-              columnItem.dataModeArray = ['sqlQueryItem', 'sqlQueryCondition']
-            } else if (columnItem.dataMode === 'only_add_modify') {
-              columnItem.dataModeArray = ['addOrEditForm', 'sqlQueryItem']
-            }
-          }
-          delete columnItem.dataMode
-          // 插槽兼容处理
-          if (columnItem.slot) {
-            if (columnItem.slot.value && columnItem.slot.type === 'ellipsis') {
-              columnItem.slotValue = columnItem.slot.value
-            } else if (columnItem.slot.keyMap && columnItem.slot.type === 'badge') {
-              columnItem.slotKeyMap = columnItem.slot.keyMap
-            } else if (columnItem.slot.actionText && columnItem.slot.type === 'action') {
-              columnItem.actionText = columnItem.slot.actionText
-            }
-          }
-          // 必选项兼容处理
-          if (columnItem.rule && columnItem.rule.required && columnItem.rule.required !== 'false') {
-            columnItem.rule.required = columnItem.rule.required.toString()
-          } else {
-            if (!columnItem.rule) {
-              columnItem.rule = {}
-            }
-            columnItem.rule.required = 'false'
-          }
-          // 数据源加载方式兼容处理
-          if (columnItem.lazyLoad && columnItem.lazyLoad !== 'false') {
-            columnItem.lazyLoad = columnItem.lazyLoad.toString()
-          } else {
-            columnItem.lazyLoad = 'false'
-          }
-          // 下拉框数据源兼容处理
-          if ((columnItem.formType === 'select' || columnItem.formType === 'treeSelect') && columnItem.selectKey) {
-            // 数据源为logic
-            if (columnItem.selectKey.toString().startsWith('logic@')) {
-              columnItem.selectType = 'logic'
-            } else if (columnItem.selectKey instanceof Array || this.isJSON(columnItem.selectKey)) {
-              // 数据源为固定json集合
-              if (columnItem.selectKey instanceof Array) {
-                columnItem.selectKey = JSON.stringify(columnItem.selectKey)
-              }
-              columnItem.selectType = 'fixArray'
-            } else {
-              columnItem.selectType = 'key'
-            }
-          }
-          this.itemMap[columnItem.key] = Object.assign({
-            key: '',
-            title: '',
-            slot: {},
-            rule: {
-              required: 'false'
-            },
-            dataModeArray: []
-          }, columnItem)
-        }
-        // 处理操作按钮配置
-        if (this.toEditJson.buttonState) {
-          this.buttonStateData = []
-          for (const buttonStateKey of Object.keys(this.toEditJson.buttonState)) {
-            if (this.toEditJson.buttonState[buttonStateKey]) {
-              this.buttonStateData.push(buttonStateKey)
-            }
-          }
-        } else {
-          this.buttonStateData = ['add', 'edit', 'delete', 'import', 'export']
-        }
-      }
-    }
-  },
-  methods: {
-    // 新增接口插槽
-    addApiSlot () {
-      if (this.form.apiSlotView.length < this.apiSlotData.length) {
-        this.form.apiSlotView.push({})
-      }
-    },
-    // 删除接口插槽
-    removeApiSlotItem (index) {
-      this.form.apiSlotView.splice(index, 1)
-    },
-    // 初始化组件
-    initView () {
-      this.joinArray = []
-      this.result = {}
-    },
-    onClose () {
-      this.$emit('update:visible', false)
-    },
-    onModelClose () {
-      this.modelVisible = false
-    },
-    addJoinItem () {
-      this.joinArray.push({
-        key: '',
-        value: ''
-      })
-      this.changeJoinArray()
-    },
-    removeJoinItem (index) {
-      this.joinArray.splice(index, 1)
-      this.changeJoinArray()
-    },
-    itemHandle (item, type) {
-      this.itemMap[item.key] = item
-      if (type === '新增') {
-        this.form.column.push(item)
-      } else {
-        this.$set(this.form.column, this.selectIndex, item)
-      }
-      this.$message.success(`${type}成功`)
-      this.$refs.queryItem.flashModal(false)
-    },
-    getColumn (callback) {
-      callback(JSON.parse(JSON.stringify(this.form.column)))
-    },
-    addColumnItem () {
-      this.type = '新增'
-      this.$refs.queryItem.addColumnItemExecute()
-    },
-    editColumnItem (key, index) {
-      if (this.itemMap[key]) {
-        this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
-        this.selectIndex = index
-      } else {
-        this.$message.warn('编辑失败')
-      }
-    },
-    removeColumnItem (key, index) {
-      const _this = this
-      this.$confirm({
-        title: '您确定要删除该数据项？',
-        content: '删除的数据项无法恢复',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk () {
-          delete _this.itemMap[key]
-          _this.form.column.splice(index, 1)
-        }
-      })
-    },
-    upColumnItem (key, index) {
-      const newIndex = index - 1
-      const itemA = this.form.column[newIndex]
-      const itemB = this.form.column[index]
-      this.form.column.splice(index, 1, itemA)
-      this.form.column.splice(newIndex, 1, itemB)
-    },
-    downColumnItem (key, index) {
-      const newIndex = index + 1
-      const itemA = this.form.column[newIndex]
-      const itemB = this.form.column[index]
-      this.form.column.splice(index, 1, itemA)
-      this.form.column.splice(newIndex, 1, itemB)
-    },
-    changeJoinArray () {
-      const joinArrayObject = {}
-      for (const item of this.joinArray) {
-        joinArrayObject[item.key] = item.value
-      }
-      this.form.joinArray = joinArrayObject
-    },
-    exportJson () {
-      const data = JSON.stringify(this.form, null, 2)
-      const blob = new Blob([data], { type: 'application/json' })
-      FileSaver.saveAs(blob, `Query.json`)
-      this.$message.success('导出成功!')
-    },
-    viewHandle (then) {
-      if (this.form.column.length === 0) {
-        this.$message.error('你没有增加任何数据字段')
-        return
-      }
-      this.result = JSON.parse(JSON.stringify(this.form))
-      if (this.result.condition && (!this.result.condition.value || this.result.condition.value === '')) {
-        delete this.result.condition
-      }
-      for (const item of this.result.column) {
-        if (item.selectType === 'fixArray') {
-          if (typeof item.selectKey === 'string') {
-            item.selectKey = JSON.parse(item.selectKey)
-          }
-        }
-        if (item.dataModeArray.length === 5) {
-          delete item.dataModeArray
-        }
-      }
-      // 查询插槽array to object
-      delete this.result.apiSlotView
-      this.result.apiSlot = {}
-      for (let i = 0; i < this.form.apiSlotView.length; i++) {
-        this.result.apiSlot[this.form.apiSlotView[i].slotType] = this.form.apiSlotView[i].slotName
-      }
-      this.result.buttonState = this.buttonState
-      then()
-    },
-    view () {
-      this.$refs.businessCreateForm.validate(valid => {
-        if (valid) {
-          this.viewHandle(() => {
-            this.modelVisible = true
-          })
-        }
-      })
-    },
-    submit () {
-      this.onModelClose()
-      this.$refs.businessCreateForm.validate(valid => {
-        if (valid) {
-          this.viewHandle(() => {
-            // saveQueryParams
-            this.$emit('saveQueryParams', this.result)
-          })
-        }
-      })
-    },
-    // 判断是否为json字符串
-    isJSON (str) {
-      if (typeof str == 'string') {
-        try {
-          const obj = JSON.parse(str)
-          return !!(typeof obj == 'object' && obj)
-        } catch (e) {
-          return false
-        }
-      }
-    },
-    // 拖拽事件
-    handleDragStart (e, item) {
-      this.dragging = item
-    },
-    handleDragEnd (e, item) {
-      if (this.ending.key === this.dragging.key) {
-        return
-      }
-      const newItems = [...this.form.column]
-      const src = newItems.indexOf(this.dragging)
-      const dst = newItems.indexOf(this.ending)
-      // newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))  替换位置
-      // 挪移位置
-      newItems.splice(src, 1)
-      newItems.splice(dst, 0, this.dragging)
-      this.form.column = newItems
-      this.$nextTick(() => {
-        this.dragging = null
-        this.ending = null
-      })
-    },
-    handleDragOver (e) {
-      // 首先把div变成可以放置的元素，即重写dragenter/dragover
-      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
-      e.dataTransfer.dropEffect = 'move'
-    },
-    handleDragEnter (e, item) {
-      // 为需要移动的元素设置dragstart事件
-      e.dataTransfer.effectAllowed = 'move'
-      this.ending = item
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.column_item :hover {
-  background-color:rgba(64, 169, 255,0.25);
-}
-.dragTips{
-  display:block;
-  text-align: center;
-  border:1px dashed rgba(64, 169, 255,0.55);
-}
-.dragTipsWarp{
-  padding: .5rem 2rem;
-}
-</style>
+<template>
+  <a-drawer
+    title="查询配置生成"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-row :gutter="24">
+      <a-col :lg="12" :md="12" :sm="24" :xl="18" :xs="24">
+        <a-form-model
+          ref="businessCreateForm"
+          :label-col="labelCol"
+          :model="form"
+          :rules="rules"
+          :wrapper-col="wrapperCol"
+        >
+          <a-form-model-item label="服务名称" prop="serviceName">
+            <a-input v-model="form.serviceName" placeholder="查询接口所在的服务名称，默认af-system"/>
+          </a-form-model-item>
+          <a-form-model-item label="查询主表名" prop="tableName">
+            <a-input v-model="form.tableName" placeholder="查询用的主表+别名，用空格隔开，如：t_userfiles u"/>
+          </a-form-model-item>
+          <a-form-model-item label="预设关联表" prop="joinArray">
+            <a-popover placement="right" title="说明">
+              <template slot="content">
+                <p>配置你的查询中可能涉及到的所有关联表</p>
+                <p>比如你的查询中涉及到了t_userinfo表，就需要加入t_userinfo表的关联，和你写SQL的关联一样</p>
+                <p>请注意，你关联的<span style="color: #ff0000">除主表外的任何表</span>都需要配置</p>
+                <a-input-group compact style="width: 400px;">
+                  <a-input placeholder="表别名" readOnly style="width: 20%"/>
+                  <a-input placeholder="关联条件" readOnly style="width: 80%"/>
+                </a-input-group>
+                <a-input-group compact style="width: 400px;">
+                  <a-input placeholder="表别名" readOnly style="width: 20%" value="ui"/>
+                  <a-input
+                    placeholder="关联条件"
+                    readOnly
+                    style="width: 80%"
+                    value="t_userinfo ui on i.f_userinfo_id = ui.f_userinfo_id"/>
+                </a-input-group>
+              </template>
+              <a-button type="primary" @click="addJoinItem()">增加</a-button>
+            </a-popover>
+            <div v-for="(itemObj, index) in joinArray" :key="index">
+              <a-input-group compact>
+                <a-input
+                  v-model="itemObj.key"
+                  placeholder="表别名"
+                  style="width: 20%;position: relative;bottom: 1px;"
+                  @change="changeJoinArray()"/>
+                <a-input v-model="itemObj.value" placeholder="关联条件" style="width: 80%" @change="changeJoinArray()">
+                  <a-icon slot="addonAfter" type="close" @click="removeJoinItem(index)"/>
+                </a-input>
+              </a-input-group>
+            </div>
+          </a-form-model-item>
+          <a-form-model-item label="SQL查询表达式" prop="condition">
+            <a-input v-model="form.condition.value" placeholder="用作SQL查询的固定条件表达式，如：gb.f_meter_type='物联网表'，可选"/>
+            <template v-if="form.condition.value && Object.keys(form.joinArray).length > 0">
+              <a-alert message="提示：如果SQL查询表达式中用到了关联表，需要勾选用到的关联表别名" type="success"/>
+              <a-checkbox-group v-model="form.condition.join" :options="conditionJoinArray"/>
+            </template>
+          </a-form-model-item>
+          <a-form-model-item label="排序方式" prop="orderBy">
+            <a-input v-model="form.orderBy" placeholder="排序字段，用别名+字段名+排序方式(可选)表示，如：u.id desc"/>
+          </a-form-model-item>
+          <a-form-model-item label="数据字段" prop="column">
+            <a-space>
+              <a-button type="primary" @click="addColumnItem()">增加</a-button>
+              <a-button icon="import" @click="$message.warn('从创意库中选择并引用高质量的通用表单项配置，敬请期待')">从创意库引入</a-button>
+            </a-space>
+            <a-row :gutter="24">
+              <a-col :span="8">
+                <span style="font-weight: bold">
+                  标签名
+                </span>
+              </a-col>
+              <a-col :span="7">
+                <span style="font-weight: bold">
+                  字段名
+                </span>
+              </a-col>
+              <a-col :span="7">
+                <span style="font-weight: bold">
+                  数据模式
+                </span>
+              </a-col>
+              <a-col :span="2">
+                <span style="font-weight: bold">
+                  操作
+                </span>
+              </a-col>
+            </a-row>
+            <a-divider style="margin: 6px 0" />
+            <div
+              v-for="(columnItem, index) in form.column"
+              :key="index"
+              class="column_item"
+              draggable="true"
+              @dragend="handleDragEnd($event, columnItem)"
+              @dragenter="handleDragEnter($event, columnItem)"
+              @dragstart="handleDragStart($event, columnItem)"
+              @dragover.prevent="handleDragOver($event, columnItem)">
+              <a-row v-if="ending && dragging && columnItem.key === ending.key && dragging.key !== ending.key" class="dragTipsWarp">
+                <span class="dragTips">拖到此处放置</span>
+              </a-row>
+              <a-row :gutter="24">
+                <a-col :span="8">
+                  <span style="font-weight: bold">
+                    {{ columnItem.title }}
+                  </span>
+                </a-col>
+                <a-col :span="7">
+                  <span style="font-weight: bold">
+                    {{ columnItem.key }}
+                  </span>
+                </a-col>
+                <a-col :span="7">
+                  <a-tooltip>
+                    <template slot="title">
+                      查询表单项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('queryForm') ? 'blue' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="file-search" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      表格列
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('table') ? 'orange' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="table" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      新增/修改表单项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('addOrEditForm') ? 'green' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="form" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      SQL查询项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('sqlQueryItem') ? 'cyan' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="bars" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      SQL查询表达式
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('sqlQueryCondition') ? 'purple' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="search" /></a-tag>
+                  </a-tooltip>
+                </a-col>
+                <a-col :span="1">
+                  <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col :span="1">
+                  <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
+                </a-col>
+              </a-row>
+            </div>
+          </a-form-model-item>
+          <a-form-model-item label="操作按钮配置" prop="buttonState">
+            <a-checkbox-group v-model="buttonStateData" :options="buttonStateArray"/>
+          </a-form-model-item>
+          <a-form-model-item label="接口插槽" prop="apiSlot">
+            <a-popover placement="right" title="说明">
+              <template slot="content">
+                <p>通过插槽，你可以轻松扩展查询配置的默认业务，配置的插槽会根据类型在默认业务的前后执行，类似于切面</p>
+                <p><span style="color: #FF0000">注意：插槽不应改变默认的业务行为</span></p>
+                <p>如果配置了业务执行前插槽,<br/>执行默认业务前会先执行设置的插槽logic，传给插槽的参数为data本身</p>
+                <p>如果配置了业务执行后插槽,<br/>执行默认业务后会执行设置的插槽logic，传给插槽的参数为默认业务的返回值</p>
+                <img src="@vue2-client/assets/img/querySlotDemo.svg" style="zoom:0.5">
+              </template>
+              <a-button type="primary" @click="addApiSlot()">增加</a-button>
+            </a-popover>
+            <div
+              v-for="(columnItem, index) in form.apiSlotView"
+              :key="index"
+            >
+              <a-input v-model="columnItem.slotName" placeholder="插槽logic名称">
+                <a-select slot="addonBefore" v-model="columnItem.slotType" style="width: 10rem" placeholder="选择插槽类型">
+                  <a-select-option
+                    v-for="item in apiSlotData"
+                    :key="item.value"
+                    :value="item.value">
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
+                <a-icon slot="addonAfter" type="close" @click="removeApiSlotItem(index)"/>
+              </a-input>
+            </div>
+          </a-form-model-item>
+        </a-form-model>
+        <create-query-item ref="queryItem" @getColumn="getColumn" @itemHandle="itemHandle"/>
+        <a-button type="primary" @click="view">操作</a-button>
+      </a-col>
+      <a-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
+        <a-card :bordered="false" size="small" style="overflow: auto" title="预览">
+          <json-viewer
+            :copyable="{copyText: '复制', copiedText: '已复制'}"
+            :expand-depth="parseInt('100')"
+            :value="result"
+            style="overflow: auto;max-height: 440px"></json-viewer>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-modal
+      :centered="true"
+      :destroyOnClose="true"
+      :visible="modelVisible"
+      :width="isMobile ? screenWidth : screenWidth * 0.8"
+      :zIndex="1001"
+      title="效果预览"
+      @cancel="onModelClose">
+      <template slot="footer">
+        <a-button key="close" @click="onModelClose">
+          返回
+        </a-button>
+        <a-button key="submit" type="primary" @click="submit">
+          保存
+        </a-button>
+      </template>
+      <x-form-table
+        :queryParamsJson="result"
+        :view-mode="true">
+      </x-form-table>
+    </a-modal>
+  </a-drawer>
+</template>
+
+<script>
+import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+import JsonViewer from 'vue-json-viewer'
+import FileSaver from 'file-saver'
+import { mapState } from 'vuex'
+import CreateQueryItem from '@vue2-client/base-client/components/common/CreateQuery/CreateQueryItem'
+
+export default {
+  name: 'CreateQuery',
+  components: {
+    CreateQueryItem,
+    JsonViewer,
+    XFormTable,
+    XFormItem
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 效果预览模态框是否展示
+      modelVisible: false,
+      // 操作按钮状态集合
+      buttonStateArray: [
+        { label: '新增', value: 'add' },
+        { label: '修改', value: 'edit' },
+        { label: '删除', value: 'delete' },
+        { label: '导入', value: 'import' },
+        { label: '导出', value: 'export' }
+      ],
+      // 操作按钮状态集合值
+      buttonStateData: ['add', 'edit', 'delete', 'import', 'export'],
+      labelCol: { span: 3 },
+      wrapperCol: { span: 18 },
+      form: {
+        serviceName: '',
+        tableName: '',
+        joinArray: {},
+        condition: {},
+        orderBy: '',
+        column: [],
+        apiSlotView: [],
+        apiSlot: {},
+      },
+      result: {},
+      itemMap: {},
+      selectIndex: null,
+      selectType: undefined,
+      joinArray: [],
+      rules: {
+        tableName: [{ required: true, message: '请输入查询表名', trigger: 'blur' }],
+        orderBy: [{ required: true, message: '请输入排序方式', trigger: 'blur' }]
+      },
+      ending: null,
+      dragging: null,
+      // 操作按钮状态集合
+      apiSlotData: [
+        { label: '查询前插槽', value: 'queryBefore' },
+        { label: '查询后插槽', value: 'queryAfter' },
+        { label: '删除前插槽', value: 'delBefore' },
+        { label: '删除后插槽', value: 'delAfter' },
+        { label: '获取行信息前插槽', value: 'editQueryBefore' },
+        { label: '获取行信息后插槽', value: 'editQueryAfter' },
+        { label: '新增/修改保存前插槽', value: 'addOrEditSaveBefore' },
+        { label: '新增/修改保存后插槽', value: 'addOrEditSaveAfter' },
+      ]
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('setting', ['isMobile']),
+    conditionJoinArray: function () {
+      const result = []
+      for (const item in this.form.joinArray) {
+        if (item !== '') {
+          result.push({
+            label: item,
+            value: item
+          })
+        }
+      }
+      if (result.length === 0) {
+        result.push({
+          label: '-',
+          value: '-'
+        })
+      }
+      return result
+    },
+    buttonState: function () {
+      const result = {
+        add: false,
+        edit: false,
+        delete: false,
+        export: false
+      }
+      for (const item of this.buttonStateData) {
+        result[item] = true
+      }
+      return result
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    toEditJson: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    visible (rel) {
+      if (rel) {
+        this.initView()
+      }
+      if (rel && this.toEditJson) {
+        // 处理预设关联表
+        if (this.joinArray.length === 0) {
+          for (const key in this.toEditJson.joinArray) {
+            this.joinArray.push({
+              key: key,
+              value: this.toEditJson.joinArray[key]
+            })
+          }
+        }
+        // apiSlot obj to arr
+        if (this.toEditJson.apiSlot) {
+          this.toEditJson.apiSlotView = []
+          for (const key of Object.keys(this.toEditJson.apiSlot)) {
+            this.toEditJson.apiSlotView.push({ slotType: key, slotName: this.toEditJson.apiSlot[key] })
+          }
+        }
+        // 处理具体表单项
+        this.form = Object.assign(
+          {
+            tableName: '',
+            joinArray: {},
+            condition: {},
+            orderBy: '',
+            apiSlotView: [],
+            apiSlot: {},
+            column: []
+          }, this.toEditJson
+        )
+        for (const columnItem of this.form.column) {
+          // 数据模式兼容性处理
+          if (!(columnItem.dataMode || columnItem.dataModeArray)) {
+            columnItem.dataModeArray = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
+          } else if (columnItem.dataMode) {
+            if (columnItem.dataMode === 'all') {
+              columnItem.dataModeArray = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
+            } else if (columnItem.dataMode === 'form') {
+              columnItem.dataModeArray = ['queryForm', 'addOrEditForm', 'sqlQueryCondition']
+            } else if (columnItem.dataMode === 'table') {
+              columnItem.dataModeArray = ['table', 'sqlQueryItem']
+            } else if (columnItem.dataMode === 'table_form') {
+              columnItem.dataModeArray = ['table', 'sqlQueryItem', 'sqlQueryCondition']
+            } else if (columnItem.dataMode === 'only_form') {
+              columnItem.dataModeArray = ['queryForm']
+            } else if (columnItem.dataMode === 'only_table') {
+              columnItem.dataModeArray = ['table']
+            } else if (columnItem.dataMode === 'clear') {
+              columnItem.dataModeArray = ['sqlQueryItem', 'sqlQueryCondition']
+            } else if (columnItem.dataMode === 'only_add_modify') {
+              columnItem.dataModeArray = ['addOrEditForm', 'sqlQueryItem']
+            }
+          }
+          delete columnItem.dataMode
+          // 插槽兼容处理
+          if (columnItem.slot) {
+            if (columnItem.slot.value && columnItem.slot.type === 'ellipsis') {
+              columnItem.slotValue = columnItem.slot.value
+            } else if (columnItem.slot.keyMap && columnItem.slot.type === 'badge') {
+              columnItem.slotKeyMap = columnItem.slot.keyMap
+            } else if (columnItem.slot.actionText && columnItem.slot.type === 'action') {
+              columnItem.actionText = columnItem.slot.actionText
+            }
+          }
+          // 必选项兼容处理
+          if (columnItem.rule && columnItem.rule.required && columnItem.rule.required !== 'false') {
+            columnItem.rule.required = columnItem.rule.required.toString()
+          } else {
+            if (!columnItem.rule) {
+              columnItem.rule = {}
+            }
+            columnItem.rule.required = 'false'
+          }
+          // 数据源加载方式兼容处理
+          if (columnItem.lazyLoad && columnItem.lazyLoad !== 'false') {
+            columnItem.lazyLoad = columnItem.lazyLoad.toString()
+          } else {
+            columnItem.lazyLoad = 'false'
+          }
+          // 下拉框数据源兼容处理
+          if ((columnItem.formType === 'select' || columnItem.formType === 'treeSelect') && columnItem.selectKey) {
+            // 数据源为logic
+            if (columnItem.selectKey.toString().startsWith('logic@')) {
+              columnItem.selectType = 'logic'
+            } else if (columnItem.selectKey instanceof Array || this.isJSON(columnItem.selectKey)) {
+              // 数据源为固定json集合
+              if (columnItem.selectKey instanceof Array) {
+                columnItem.selectKey = JSON.stringify(columnItem.selectKey)
+              }
+              columnItem.selectType = 'fixArray'
+            } else {
+              columnItem.selectType = 'key'
+            }
+          }
+          this.itemMap[columnItem.key] = Object.assign({
+            key: '',
+            title: '',
+            slot: {},
+            rule: {
+              required: 'false'
+            },
+            dataModeArray: []
+          }, columnItem)
+        }
+        // 处理操作按钮配置
+        if (this.toEditJson.buttonState) {
+          this.buttonStateData = []
+          for (const buttonStateKey of Object.keys(this.toEditJson.buttonState)) {
+            if (this.toEditJson.buttonState[buttonStateKey]) {
+              this.buttonStateData.push(buttonStateKey)
+            }
+          }
+        } else {
+          this.buttonStateData = ['add', 'edit', 'delete', 'import', 'export']
+        }
+      }
+    }
+  },
+  methods: {
+    // 新增接口插槽
+    addApiSlot () {
+      if (this.form.apiSlotView.length < this.apiSlotData.length) {
+        this.form.apiSlotView.push({})
+      }
+    },
+    // 删除接口插槽
+    removeApiSlotItem (index) {
+      this.form.apiSlotView.splice(index, 1)
+    },
+    // 初始化组件
+    initView () {
+      this.joinArray = []
+      this.result = {}
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    onModelClose () {
+      this.modelVisible = false
+    },
+    addJoinItem () {
+      this.joinArray.push({
+        key: '',
+        value: ''
+      })
+      this.changeJoinArray()
+    },
+    removeJoinItem (index) {
+      this.joinArray.splice(index, 1)
+      this.changeJoinArray()
+    },
+    itemHandle (item, type) {
+      this.itemMap[item.key] = item
+      if (type === '新增') {
+        this.form.column.push(item)
+      } else {
+        this.$set(this.form.column, this.selectIndex, item)
+      }
+      this.$message.success(`${type}成功`)
+      this.$refs.queryItem.flashModal(false)
+    },
+    getColumn (callback) {
+      callback(JSON.parse(JSON.stringify(this.form.column)))
+    },
+    addColumnItem () {
+      this.type = '新增'
+      this.$refs.queryItem.addColumnItemExecute()
+    },
+    editColumnItem (key, index) {
+      if (this.itemMap[key]) {
+        this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
+        this.selectIndex = index
+      } else {
+        this.$message.warn('编辑失败')
+      }
+    },
+    removeColumnItem (key, index) {
+      const _this = this
+      this.$confirm({
+        title: '您确定要删除该数据项？',
+        content: '删除的数据项无法恢复',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          delete _this.itemMap[key]
+          _this.form.column.splice(index, 1)
+        }
+      })
+    },
+    upColumnItem (key, index) {
+      const newIndex = index - 1
+      const itemA = this.form.column[newIndex]
+      const itemB = this.form.column[index]
+      this.form.column.splice(index, 1, itemA)
+      this.form.column.splice(newIndex, 1, itemB)
+    },
+    downColumnItem (key, index) {
+      const newIndex = index + 1
+      const itemA = this.form.column[newIndex]
+      const itemB = this.form.column[index]
+      this.form.column.splice(index, 1, itemA)
+      this.form.column.splice(newIndex, 1, itemB)
+    },
+    changeJoinArray () {
+      const joinArrayObject = {}
+      for (const item of this.joinArray) {
+        joinArrayObject[item.key] = item.value
+      }
+      this.form.joinArray = joinArrayObject
+    },
+    exportJson () {
+      const data = JSON.stringify(this.form, null, 2)
+      const blob = new Blob([data], { type: 'application/json' })
+      FileSaver.saveAs(blob, `Query.json`)
+      this.$message.success('导出成功!')
+    },
+    viewHandle (then) {
+      if (this.form.column.length === 0) {
+        this.$message.error('你没有增加任何数据字段')
+        return
+      }
+      this.result = JSON.parse(JSON.stringify(this.form))
+      if (this.result.condition && (!this.result.condition.value || this.result.condition.value === '')) {
+        delete this.result.condition
+      }
+      for (const item of this.result.column) {
+        if (item.selectType === 'fixArray') {
+          if (typeof item.selectKey === 'string') {
+            item.selectKey = JSON.parse(item.selectKey)
+          }
+        }
+        if (item.dataModeArray.length === 5) {
+          delete item.dataModeArray
+        }
+      }
+      // 查询插槽array to object
+      delete this.result.apiSlotView
+      this.result.apiSlot = {}
+      for (let i = 0; i < this.form.apiSlotView.length; i++) {
+        this.result.apiSlot[this.form.apiSlotView[i].slotType] = this.form.apiSlotView[i].slotName
+      }
+      this.result.buttonState = this.buttonState
+      then()
+    },
+    view () {
+      this.$refs.businessCreateForm.validate(valid => {
+        if (valid) {
+          this.viewHandle(() => {
+            this.modelVisible = true
+          })
+        }
+      })
+    },
+    submit () {
+      this.onModelClose()
+      this.$refs.businessCreateForm.validate(valid => {
+        if (valid) {
+          this.viewHandle(() => {
+            // saveQueryParams
+            this.$emit('saveQueryParams', this.result)
+          })
+        }
+      })
+    },
+    // 判断是否为json字符串
+    isJSON (str) {
+      if (typeof str == 'string') {
+        try {
+          const obj = JSON.parse(str)
+          return !!(typeof obj == 'object' && obj)
+        } catch (e) {
+          return false
+        }
+      }
+    },
+    // 拖拽事件
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      if (this.ending.key === this.dragging.key) {
+        return
+      }
+      const newItems = [...this.form.column]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(this.ending)
+      // newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))  替换位置
+      // 挪移位置
+      newItems.splice(src, 1)
+      newItems.splice(dst, 0, this.dragging)
+      this.form.column = newItems
+      this.$nextTick(() => {
+        this.dragging = null
+        this.ending = null
+      })
+    },
+    handleDragOver (e) {
+      // 首先把div变成可以放置的元素，即重写dragenter/dragover
+      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+      e.dataTransfer.dropEffect = 'move'
+    },
+    handleDragEnter (e, item) {
+      // 为需要移动的元素设置dragstart事件
+      e.dataTransfer.effectAllowed = 'move'
+      this.ending = item
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.column_item :hover {
+  background-color:rgba(64, 169, 255,0.25);
+}
+.dragTips{
+  display:block;
+  text-align: center;
+  border:1px dashed rgba(64, 169, 255,0.55);
+}
+.dragTipsWarp{
+  padding: .5rem 2rem;
+}
+</style>