cnhis-design-vue 2.1.57 → 2.1.59

package/packages/drag-layout/drag-layout.vue

@@ -1,778 +1,778 @@
-<template>
-  <div class="drag-layout-container">
-    <div class="border-box"></div>
-    <!-- 左边 -->
-    <div class="text-area">
-      <div class="info-header">{{ getI18nText("1.1.8.6.3", "备选字段") }}</div>
-      <draggable
-        class="min-height text-draggable"
-        v-model="hideFields"
-        :options="{
-          group: 'formitem',
-          animation: 300
-        }"
-        ref="textDraggable"
-        id="textDraggable"
-        @add="leftDragAdd"
-      >
-        <li v-for="(element, index) in hideFields" :key="index">
-          <slot name="leftItem" :itemData="element">
-            <DragFormLeftItem :element="element" />
-          </slot>
-        </li>
-      </draggable>
-    </div>
-    <!-- 右边 -->
-    <div class="form-area">
-      <div class="info-header">
-        <a-button class="add-divider" type="dashed" size="small" @click="handlerAddBranchLine"
-          >新建分行符</a-button
-        >
-        <a-button class="add-divider" type="dashed" size="small" @click="handlerAddLine">{{
-          getI18nText("1.9.50", "新建分线栏")
-        }}</a-button>
-      </div>
-      <draggable
-        class="min-height draggable-content"
-        v-model="showFields"
-        :move="handleDragRemove"
-        :options="{
-          group: 'formitem',
-          animation: 300,
-          filter: '.undraggable'
-        }"
-      >
-        <a-col
-          v-for="(element, index) in showFields"
-          :key="index"
-          :label="element"
-          :span="(element.elem_width || 12) * 2"
-          :class="{
-            'combination-col': element.html_type === 'COMBINATION'
-          }"
-          ><slot name="rightItem" :itemData="element">
-            <DragFormRightItem
-              :element="element"
-              :index="index"
-              @handleEdit="handleEdit"
-              @handleDelete="handleDelete"
-            />
-          </slot>
-        </a-col>
-      </draggable>
-    </div>
-
-    <!-- 弹窗 -->
-    <a-modal
-      :title="getI18nText('1.9.51', '字段属性')"
-      :zIndex="2001"
-      v-model="modalVisible"
-      @ok="handleOk"
-      v-if="modalVisible"
-    >
-      <div slot="title">{{ getI18nText("1.9.51", "字段属性") }}</div>
-      <a-form :form="form">
-        <!-- 名称 -->
-        <a-form-item
-          v-if="!is_text"
-          :label="getI18nText('1.1.3.1.1', '名称')"
-          :label-col="{ span: 4 }"
-          :wrapper-col="{ span: 14 }"
-        >
-          <!-- rules: [{ required: true, message: $t('1.9.40') }], -->
-          <a-input
-            :placeholder="getI18nText('1.1.3.1.1', '名称')"
-            v-decorator="[
-              'selectAlias',
-              {
-                initialValue: modalFormData.fieldAlias
-              }
-            ]"
-          />
-        </a-form-item>
-        <template v-if="!isPageLayout">
-          <!-- 默认值 -->
-          <a-form-item
-            v-if="!is_text"
-            :label="getI18nText('1.2.1.12.21', '默认值')"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 14 }"
-          >
-            <a-input
-              :placeholder="getI18nText('1.2.1.12.21', '默认值')"
-              v-decorator="[
-                'default_val',
-                {
-                  initialValue: modalFormData.default_val
-                }
-              ]"
-            />
-          </a-form-item>
-        </template>
-
-        <!--  宽度 -->
-        <a-form-item
-          v-if="!hideModalWidth"
-          :label="getI18nText('1.2.1.12.25', '宽度')"
-          :label-col="{ span: 4 }"
-          :wrapper-col="{ span: 14 }"
-        >
-          <a-select
-            dropdownClassName="dragForm-select-drop"
-            v-decorator="['selectWidth', { initialValue: modalFormData.elem_width }]"
-          >
-            <a-select-option value="12">{{ getI18nText("1.2.5.27", "整行") }}</a-select-option>
-            <a-select-option value="6">{{ getI18nText("1.2.5.28", "半行") }}</a-select-option>
-            <a-select-option value="10">5/6</a-select-option>
-            <a-select-option value="8">2/3</a-select-option>
-            <a-select-option value="4">1/3</a-select-option>
-            <a-select-option value="9">3/4</a-select-option>
-            <a-select-option value="3">1/4</a-select-option>
-          </a-select>
-        </a-form-item>
-
-        <!-- 高度 -->
-        <a-form-item
-          v-if="isPageLayout && !hideModalWidth"
-          :label="getI18nText('1.9.513', '高度（行）')"
-          :label-col="{ span: 4 }"
-          :wrapper-col="{ span: 14 }"
-        >
-          <a-input
-            :placeholder="getI18nText('1.9.513', '高度（行）')"
-            v-decorator="[
-              'line_height',
-              {
-                initialValue: modalFormData.line_height
-              }
-            ]"
-          />
-        </a-form-item>
-        <template v-if="!is_text">
-          <!-- 说明文本 -->
-          <a-form-item
-            v-if="!isPageLayout"
-            :label="getI18nText('1.9.242', '说明文本')"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 14 }"
-          >
-            <a-input
-              :placeholder="getI18nText('1.9.242', '说明文本')"
-              v-decorator="[
-                'placeholder',
-                {
-                  initialValue: modalFormData.placeholder
-                }
-              ]"
-            />
-          </a-form-item>
-
-          <a-form-item
-            v-if="modalFormData.html_type != 'PAGE_LAYOUT'"
-            :label="'问号提示'"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 14 }"
-          >
-            <a-input
-              :maxLength="200"
-              :placeholder="'请输入问号提示'"
-              v-decorator="[
-                'remark',
-                {
-                  initialValue: modalFormData.remark
-                }
-              ]"
-            />
-          </a-form-item>
-        </template>
-
-        <template
-          v-if="
-            modalFormData.is_fast_reply_field != 1 &&
-              (modalFormData.html_type == 'TEXTAREA' || modalFormData.html_type == 'INPUT')
-          "
-        >
-          <!-- 快速输入 -->
-          <a-form-item
-            :label="getI18nText('1.9.5', '快速输入')"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 14 }"
-          >
-            <a-checkbox :checked="modalFormData.is_fast_reply" @change="checkOnChange"></a-checkbox>
-          </a-form-item>
-          <!-- 回复分类 -->
-          <a-form-item
-            v-if="modalFormData.is_fast_reply"
-            :label="'短语分类'"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 14 }"
-          >
-            <a-select
-              mode="multiple"
-              showSearch
-              v-decorator="[
-                'reply_category',
-                {
-                  rules: [
-                    {
-                      required: modalFormData.is_fast_reply,
-                      message: getI18nText('1.9.40', '请输入')
-                    }
-                  ],
-                  initialValue: modalFormData.reply_category
-                }
-              ]"
-              :filterOption="$utils.filterOption"
-              :placeholder="getI18nText('1.1.3.1.14', '分类名称')"
-              @change="changeCategofy"
-              dropdownClassName="dragForm-select-drop"
-            >
-              <!-- 分类名称 -->
-              <a-select-option v-for="(v, i) in publicReply" :key="v.id + i" :value="v">{{
-                v
-              }}</a-select-option>
-            </a-select>
-          </a-form-item>
-          <!-- v-show="modalFormData.is_edit" -->
-          <!-- 部分隐藏 -->
-          <a-form-item
-            v-show="modalFormData.is_edit == 0"
-            :label="getI18nText('1.1.8.2.10', '部分隐藏')"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 14 }"
-          >
-            <a-input-number
-              :placeholder="getI18nText('1.9.40', '请输入')"
-              v-decorator="[
-                'hideExpression',
-                {
-                  rules: [{ type: 'number', message: getI18nText('1.9.40', '请输入') }],
-                  initialValue: modalFormData.hideExpression
-                }
-              ]"
-            />
-          </a-form-item>
-        </template>
-
-        <!-- 动态文本值 -->
-        <a-form-item v-if="is_text" :label="'文本内容(支持FreeMarker)'">
-          <a-textarea
-            :placeholder="'请输入动态文本内容'"
-            v-decorator="[
-              'default_val',
-              {
-                initialValue: modalFormData.default_val
-              }
-            ]"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <a-modal :title="lineAddTitle" :zIndex="2001" v-model="visibleLineAdd">
-      <template slot="footer">
-        <a-button key="back" @click="handleCancel">
-          {{ getI18nText("1.1.1.1.4", "取消") }}
-        </a-button>
-        <a-button key="submit" type="primary" @click="handleOkLineAdd">
-          {{ getI18nText("1.1.1.1.5", "确认") }}
-        </a-button>
-      </template>
-      <div>
-        <label class="new-name">{{ getI18nText("1.1.3.1.1", "名称") }}</label>
-        <a-input class="view-model-input new-name-input" v-model="itemTitleNameAdd" />
-      </div>
-      <div v-show="lineType != 'LINE_BREAKS'">
-        <input
-          class="name-new-change"
-          @change="onChangeAdd($event, 'is_show')"
-          type="checkbox"
-          v-model="isAddChecked"
-        />
-        {{ getI18nText("1.9.69", "默认展开") }}
-        <br />
-        <input
-          class="name-new-change"
-          @change="onChangeAdd($event, 'is_not_fold')"
-          type="checkbox"
-          v-model="is_not_foldChecked"
-        />
-        不可折叠
-        <!-- {{ $t("1.9.69") }} -->
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import create from "@/core/create";
-import { Button, Col, Modal, Input, Form, Select, Checkbox, InputNumber } from "ant-design-vue";
-import draggable from "vuedraggable";
-import DragFormLeftItem from "./DragFormLeftItem.vue";
-import DragFormRightItem from "./DragFormRightItem.vue";
-import I18nm from "./I18n-mixins";
-export default create({
-  name: 'drag-layout',
-  components: {
-    [Button.name]: Button,
-    [Select.name]: Select,
-    [Select.Option.name]: Select.Option,
-    [Input.name]: Input,
-    [InputNumber.name]: InputNumber,
-    [Input.TextArea.name]: Input.TextArea,
-    [Checkbox.name]: Checkbox,
-    [Col.name]: Col,
-    AModal: Modal,
-    [Form.name]: Form,
-    [Form.Item.name]: Form.Item,
-    draggable,
-    DragFormLeftItem,
-    DragFormRightItem
-  },
-  mixins: [I18nm],
-  data() {
-    return {
-      modalVisible: false,
-      visibleLineAdd: false,
-
-      modalFormData: {
-        name: "", // 名称
-        alias: "",
-        fieldAlias: "", // 别名
-        elem_width: "12", // 宽度
-        reply_category: [], // 快速回复分类
-        is_fast_reply: false, // 快速输入
-        html_type: "", // 类型
-        is_edit: 1, // 是否可编辑
-        hideExpression: "", // 部分隐藏
-        remark: "", // 字段说明
-        default_val: "", // 默认值
-        placeholder: "", // 字段提示语
-        publicReply: [], // 分类数据
-        is_fast_reply_field: 0 // 快速回复开启
-      },
-      publicReply: [],
-
-      itemTitleNameAdd: "",
-      is_show: 0,
-      is_not_fold: 0,
-      isAddChecked: false,
-      is_not_foldChecked: false,
-
-      handleLIne: "add",
-      lineType: "LINEBAR",
-
-      showFields: [],
-      hideFields: [],
-      curIndex: undefined,
-      editModalType: "edit",
-
-      lineAddTitle: this.getI18nText("1.9.50", "新建分线栏")
-    };
-  },
-  props: {
-    leftList: {
-      type: Array,
-      default: () => []
-    },
-    rightList: {
-      type: Array,
-      default: () => []
-    },
-
-    getpublicReplyList: {
-      type: Function,
-      default: () => Promise.resolve([])
-    }
-  },
-  computed: {
-    isPageLayout() {
-      return (
-        this.modalFormData.html_type === "PAGE_LAYOUT" ||
-        this.modalFormData.html_type === "COMBINATION"
-      );
-    },
-    is_text() {
-      return "TEXT" == this.modalFormData.html_type;
-    },
-    hideModalWidth() {
-      return this.modalFormData.html_type === "COMBINATION";
-    },
-    lineTypeList() {
-      return ["LINEBAR", "LINE_BREAKS"];
-    }
-  },
-  watch: {
-    showFields: {
-      deep: true,
-      handler(val) {
-        this.updateConfig();
-      }
-    },
-    hideFields: {
-      deep: true,
-      handler(val) {
-        this.updateConfig();
-      }
-    }
-  },
-  beforeCreate() {
-    this.form = this.$form.createForm(this);
-  },
-  created() {},
-  mounted() {
-    this.mountedInit();
-    this.$nextTick().then(() => {
-      this.$el.querySelector('.text-area').style.height = this.$el.clientHeight + 'px';
-    });
-  },
-  methods: {
-    mountedInit() {
-      const { rightList, leftList } = this;
-      let checkList = v => Array.isArray(v) && v.length > 0;
-      if (checkList(rightList) || checkList(leftList)) {
-        this.handleSetData({ rightList, leftList });
-      }
-    },
-
-    // 设置数据
-    handleSetData(config = {}) {
-      if (Array.isArray(config.rightList)) {
-        this.$set(this, "showFields", config.rightList);
-      }
-
-      if (Array.isArray(config.leftList)) {
-        this.$set(this, "hideFields", config.leftList);
-      }
-    },
-    handleEdit(data, i, type = "edit") {
-      this.currentIndex = i;
-      this.editModalType = type;
-      if (this.isLineType(data.html_type)) {
-        this.handleLIne = "edit";
-        this.visibleLineAdd = true;
-        this.itemTitleNameAdd = data.fieldAlias || data.name || "分行符";
-        this.is_show = data.is_show;
-        this.is_not_fold = data.is_not_fold;
-        this.isAddChecked = data.is_show == 1;
-        this.is_not_foldChecked = data.is_not_fold == 1;
-        return;
-      }
-      const keyList = [
-        "fieldAlias",
-        "elem_width",
-        "reply_category",
-        "html_type",
-        "is_edit",
-        "remark",
-        "default_val",
-        "line_height",
-        "is_fast_reply_field",
-        "placeholder"
-      ];
-      keyList.forEach(v => {
-        if (v === "reply_category") {
-          if (data[v] && this.$utils.isJSON(data[v])) {
-            this.modalFormData[v] = JSON.parse(data[v]) || [];
-          } else {
-            this.modalFormData[v] = (data[v] && [data[v]]) || [];
-          }
-        } else {
-          this.modalFormData[v] = data[v] || undefined;
-        }
-      });
-      if (!this.publicReply?.length && data["is_fast_reply_field"] != 1) {
-        this.handleReqQieckReplyData();
-      }
-
-      //  其他处理
-      this.modalFormData.is_fast_reply = data.is_fast_reply == 1;
-      this.modalFormData.hideExpression = 0;
-
-      this.modalVisible = true;
-    },
-    // 快速回复
-    async handleReqQieckReplyData() {
-      // this.axios
-      //   .get("/fastReply/getList/all")
-      //   .then(({ data }) => {
-      //     if (data.result === "SUCCESS") {
-      //       this.publicReply = data.map?.organizationReply || [];
-      //     } else {
-      //       this.publicReply = [];
-      //     }
-      //   })
-      //   .catch(err => {
-      //     this.publicReply = [];
-      //     console.log(err);
-      //   });
-      try {
-        let res = await this.getpublicReplyList();
-        this.publicReply = Array.isArray(res) ? res : [];
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    changeCategofy(value) {
-      console.log(value);
-    },
-
-    handleOk(e) {
-      e.preventDefault();
-      this.form.validateFields((err, values) => {
-        if (err) return;
-        if (this.editModalType == "edit") {
-          this.showFields[this.currentIndex].fieldAlias = values.selectAlias;
-          this.showFields[this.currentIndex].elem_width = values.selectWidth;
-          this.showFields[this.currentIndex].is_fast_reply = this.modalFormData.is_fast_reply
-            ? 1
-            : 0;
-          // 直接赋值，不需要转换的属性
-          let keys = [
-            "reply_category",
-            "remark",
-            "hideExpression",
-            "default_val",
-            "line_height",
-            "placeholder"
-          ];
-          keys.forEach(k => {
-            this.showFields[this.currentIndex][k] = values[k];
-          });
-        } else {
-          this.showFields[this.currentIndex].reply_category = values.reply_category;
-        }
-
-        this.modalVisible = false;
-      });
-    },
-    handleDelete(data, i) {
-      let deleItem = this.showFields.splice(i, 1);
-      // 没有 val_key 的分线栏是中台创建的可以删除，后台创建的移到备选字段
-      if (this.isLineType(data.html_type) && !data.val_key) {
-        return;
-      }
-      this.hideFields.push(...deleItem);
-    },
-    getParams() {
-      return {
-        showFields: this.showFields,
-        hideFields: this.hideFields
-      };
-    },
-
-    addItemShowLine() {
-      this.visibleLineAdd = true;
-      this.itemTitleNameAdd = "";
-      this.is_show = 1;
-      this.is_not_fold = 0;
-      this.isAddChecked = true;
-      this.is_not_foldChecked = false;
-      if (this.lineType === "LINEBAR") {
-        this.lineAddTitle = this.getI18nText("1.9.50", "新建分线栏");
-      } else if (this.lineType === "LINE_BREAKS") {
-        this.lineAddTitle = "新建分行符";
-      }
-    },
-    handlerAddLine() {
-      this.handleLIne = "add";
-      this.lineType = "LINEBAR";
-      this.addItemShowLine();
-    },
-    // 新增分行符
-    handlerAddBranchLine() {
-      this.handleLIne = "add";
-      this.lineType = "LINE_BREAKS";
-      this.addItemShowLine();
-      this.is_show = 1;
-    },
-    onChangeAdd(e, key) {
-      if (e.target.checked == true) {
-        this[key] = 1;
-      } else {
-        this[key] = 0;
-      }
-    },
-    handleCancel() {
-      this.visibleLine = false;
-      this.visibleLineAdd = false;
-    },
-    handleOkLineAdd() {
-      let isL = this.lineType === "LINEBAR";
-      let lineDefaultName = isL ? "分线栏" : "分行符";
-
-      if (this.handleLIne === "edit") {
-        let curItem = this.showFields[this.currentIndex];
-        this.lineType = curItem.html_type;
-        curItem.is_show = this.is_show;
-        if (isL) {
-          curItem.is_not_fold = this.is_not_fold;
-        }
-        // curItem.fieldAlias = this.itemTitleNameAdd;
-        this.$set(curItem, "fieldAlias", this.itemTitleNameAdd || lineDefaultName);
-      } else {
-        // 新建 name
-        this.showFields.push({
-          html_type: this.lineType || "LINEBAR",
-          is_show: this.is_show,
-          is_not_fold: isL ? this.is_not_fold : undefined,
-          name: this.itemTitleNameAdd || lineDefaultName
-        });
-      }
-      this.handleCancel();
-    },
-    leftDragAdd(e) {
-      let { newIndex, oldIndex } = e;
-      if (oldIndex > -1 && oldIndex > -1) {
-        let curItem = this.hideFields[newIndex];
-        if (curItem.is_system_fields == 0) {
-          this.hideFields.splice(newIndex, 1);
-          this.showFields.splice(oldIndex, 0, curItem);
-        }
-      }
-    },
-    handleDragRemove(e) {
-      let { draggedContext = {}, to } = e;
-      let movedItem = draggedContext.element || {};
-      let className = to.className || "";
-
-      if (movedItem.is_drag && movedItem.is_drag == 0 && className.includes("text-draggable")) {
-        return false;
-      }
-    },
-    checkOnChange(e) {
-      this.modalFormData.is_fast_reply = e.target.checked;
-    },
-
-    /** line 类型 */
-    isLineType(t) {
-      return this.lineTypeList.includes(t);
-    },
-
-    visibleChange(e) {
-      // console.log("e", e);
-    },
-
-    /**
-     * 更新配置
-     */
-    updateConfig() {
-      clearTimeout(this.updateTime);
-      this.updateTime = setTimeout(() => {
-        this.$emit("updateConfig", {
-          leftList: this.hideFields,
-          rightList: this.showFields
-        });
-      }, 100);
-    }
-  }
-});
-</script>
-<style lang="less" scoped>
-.drag-layout-container {
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  overflow: hidden;
-  overflow-y: auto;
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  border: 1px solid #d2d9e8;
-  text-align: left;
-  .min-height {
-    height: calc(100% - 60px);
-    overflow: hidden;
-    overflow-y: auto;
-    li {
-      list-style: none;
-    }
-  }
-
-  .border-box {
-    position: absolute;
-    top: 0;
-    left: 30%;
-    border-left: 1px solid #d2d9e8;
-    height: 100%;
-  }
-
-  // 左边
-  .text-area {
-    width: 30%;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0 !important;
-
-    // 头部
-    .info-header {
-      display: flex;
-      height: 50px;
-      line-height: 50px;
-      padding: 0 10px;
-      margin-bottom: 10px;
-      color: #2e2e2e;
-      font-size: 18px;
-      font-weight: bold;
-      background: #e6eaef;
-    }
-
-    // 拖拽容器
-    .text-draggable {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-items: flex-start;
-      padding: 0 12px 12px;
-      box-sizing: border-box;
-      align-content: flex-start;
-      li {
-        width: 49%;
-        text-align: center;
-      }
-    }
-  }
-
-  // 右边
-  .form-area {
-    position: relative;
-    width: 70%;
-    height: 100%;
-    overflow-y: auto;
-    padding: 4px;
-    box-sizing: border-box;
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
-    // .add-divider {
-    //   position: absolute;
-    //   right: 8px;
-    //   top: 8px;
-    // }
-    .info-header {
-      height: 50px;
-      margin-bottom: 10px;
-      background: unset;
-
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-    }
-    /deep/ .combination-col {
-      // padding: 0px 8px 8px;
-      border: 1px solid #cdc5d3;
-      margin-bottom: 10px;
-    }
-
-    .draggable-content {
-      /deep/ .ant-col {
-        transform: none !important;
-      }
-    }
-  }
-}
-
-.dragForm-select-drop {
-  z-index: 2001;
-}
-</style>
+<template>
+  <div class="drag-layout-container">
+    <div class="border-box"></div>
+    <!-- 左边 -->
+    <div class="text-area">
+      <div class="info-header">{{ getI18nText("1.1.8.6.3", "备选字段") }}</div>
+      <draggable
+        class="min-height text-draggable"
+        v-model="hideFields"
+        :options="{
+          group: 'formitem',
+          animation: 300
+        }"
+        ref="textDraggable"
+        id="textDraggable"
+        @add="leftDragAdd"
+      >
+        <li v-for="(element, index) in hideFields" :key="index">
+          <slot name="leftItem" :itemData="element">
+            <DragFormLeftItem :element="element" />
+          </slot>
+        </li>
+      </draggable>
+    </div>
+    <!-- 右边 -->
+    <div class="form-area">
+      <div class="info-header">
+        <a-button class="add-divider" type="dashed" size="small" @click="handlerAddBranchLine"
+          >新建分行符</a-button
+        >
+        <a-button class="add-divider" type="dashed" size="small" @click="handlerAddLine">{{
+          getI18nText("1.9.50", "新建分线栏")
+        }}</a-button>
+      </div>
+      <draggable
+        class="min-height draggable-content"
+        v-model="showFields"
+        :move="handleDragRemove"
+        :options="{
+          group: 'formitem',
+          animation: 300,
+          filter: '.undraggable'
+        }"
+      >
+        <a-col
+          v-for="(element, index) in showFields"
+          :key="index"
+          :label="element"
+          :span="(element.elem_width || 12) * 2"
+          :class="{
+            'combination-col': element.html_type === 'COMBINATION'
+          }"
+          ><slot name="rightItem" :itemData="element">
+            <DragFormRightItem
+              :element="element"
+              :index="index"
+              @handleEdit="handleEdit"
+              @handleDelete="handleDelete"
+            />
+          </slot>
+        </a-col>
+      </draggable>
+    </div>
+
+    <!-- 弹窗 -->
+    <a-modal
+      :title="getI18nText('1.9.51', '字段属性')"
+      :zIndex="2001"
+      v-model="modalVisible"
+      @ok="handleOk"
+      v-if="modalVisible"
+    >
+      <div slot="title">{{ getI18nText("1.9.51", "字段属性") }}</div>
+      <a-form :form="form">
+        <!-- 名称 -->
+        <a-form-item
+          v-if="!is_text"
+          :label="getI18nText('1.1.3.1.1', '名称')"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 14 }"
+        >
+          <!-- rules: [{ required: true, message: $t('1.9.40') }], -->
+          <a-input
+            :placeholder="getI18nText('1.1.3.1.1', '名称')"
+            v-decorator="[
+              'selectAlias',
+              {
+                initialValue: modalFormData.fieldAlias
+              }
+            ]"
+          />
+        </a-form-item>
+        <template v-if="!isPageLayout">
+          <!-- 默认值 -->
+          <a-form-item
+            v-if="!is_text"
+            :label="getI18nText('1.2.1.12.21', '默认值')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 14 }"
+          >
+            <a-input
+              :placeholder="getI18nText('1.2.1.12.21', '默认值')"
+              v-decorator="[
+                'default_val',
+                {
+                  initialValue: modalFormData.default_val
+                }
+              ]"
+            />
+          </a-form-item>
+        </template>
+
+        <!--  宽度 -->
+        <a-form-item
+          v-if="!hideModalWidth"
+          :label="getI18nText('1.2.1.12.25', '宽度')"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 14 }"
+        >
+          <a-select
+            dropdownClassName="dragForm-select-drop"
+            v-decorator="['selectWidth', { initialValue: modalFormData.elem_width }]"
+          >
+            <a-select-option value="12">{{ getI18nText("1.2.5.27", "整行") }}</a-select-option>
+            <a-select-option value="6">{{ getI18nText("1.2.5.28", "半行") }}</a-select-option>
+            <a-select-option value="10">5/6</a-select-option>
+            <a-select-option value="8">2/3</a-select-option>
+            <a-select-option value="4">1/3</a-select-option>
+            <a-select-option value="9">3/4</a-select-option>
+            <a-select-option value="3">1/4</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <!-- 高度 -->
+        <a-form-item
+          v-if="isPageLayout && !hideModalWidth"
+          :label="getI18nText('1.9.513', '高度（行）')"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 14 }"
+        >
+          <a-input
+            :placeholder="getI18nText('1.9.513', '高度（行）')"
+            v-decorator="[
+              'line_height',
+              {
+                initialValue: modalFormData.line_height
+              }
+            ]"
+          />
+        </a-form-item>
+        <template v-if="!is_text">
+          <!-- 说明文本 -->
+          <a-form-item
+            v-if="!isPageLayout"
+            :label="getI18nText('1.9.242', '说明文本')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 14 }"
+          >
+            <a-input
+              :placeholder="getI18nText('1.9.242', '说明文本')"
+              v-decorator="[
+                'placeholder',
+                {
+                  initialValue: modalFormData.placeholder
+                }
+              ]"
+            />
+          </a-form-item>
+
+          <a-form-item
+            v-if="modalFormData.html_type != 'PAGE_LAYOUT'"
+            :label="'问号提示'"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 14 }"
+          >
+            <a-input
+              :maxLength="200"
+              :placeholder="'请输入问号提示'"
+              v-decorator="[
+                'remark',
+                {
+                  initialValue: modalFormData.remark
+                }
+              ]"
+            />
+          </a-form-item>
+        </template>
+
+        <template
+          v-if="
+            modalFormData.is_fast_reply_field != 1 &&
+              (modalFormData.html_type == 'TEXTAREA' || modalFormData.html_type == 'INPUT')
+          "
+        >
+          <!-- 快速输入 -->
+          <a-form-item
+            :label="getI18nText('1.9.5', '快速输入')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 14 }"
+          >
+            <a-checkbox :checked="modalFormData.is_fast_reply" @change="checkOnChange"></a-checkbox>
+          </a-form-item>
+          <!-- 回复分类 -->
+          <a-form-item
+            v-if="modalFormData.is_fast_reply"
+            :label="'短语分类'"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 14 }"
+          >
+            <a-select
+              mode="multiple"
+              showSearch
+              v-decorator="[
+                'reply_category',
+                {
+                  rules: [
+                    {
+                      required: modalFormData.is_fast_reply,
+                      message: getI18nText('1.9.40', '请输入')
+                    }
+                  ],
+                  initialValue: modalFormData.reply_category
+                }
+              ]"
+              :filterOption="$utils.filterOption"
+              :placeholder="getI18nText('1.1.3.1.14', '分类名称')"
+              @change="changeCategofy"
+              dropdownClassName="dragForm-select-drop"
+            >
+              <!-- 分类名称 -->
+              <a-select-option v-for="(v, i) in publicReply" :key="v.id + i" :value="v">{{
+                v
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+          <!-- v-show="modalFormData.is_edit" -->
+          <!-- 部分隐藏 -->
+          <a-form-item
+            v-show="modalFormData.is_edit == 0"
+            :label="getI18nText('1.1.8.2.10', '部分隐藏')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 14 }"
+          >
+            <a-input-number
+              :placeholder="getI18nText('1.9.40', '请输入')"
+              v-decorator="[
+                'hideExpression',
+                {
+                  rules: [{ type: 'number', message: getI18nText('1.9.40', '请输入') }],
+                  initialValue: modalFormData.hideExpression
+                }
+              ]"
+            />
+          </a-form-item>
+        </template>
+
+        <!-- 动态文本值 -->
+        <a-form-item v-if="is_text" :label="'文本内容(支持FreeMarker)'">
+          <a-textarea
+            :placeholder="'请输入动态文本内容'"
+            v-decorator="[
+              'default_val',
+              {
+                initialValue: modalFormData.default_val
+              }
+            ]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <a-modal :title="lineAddTitle" :zIndex="2001" v-model="visibleLineAdd">
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel">
+          {{ getI18nText("1.1.1.1.4", "取消") }}
+        </a-button>
+        <a-button key="submit" type="primary" @click="handleOkLineAdd">
+          {{ getI18nText("1.1.1.1.5", "确认") }}
+        </a-button>
+      </template>
+      <div>
+        <label class="new-name">{{ getI18nText("1.1.3.1.1", "名称") }}</label>
+        <a-input class="view-model-input new-name-input" v-model="itemTitleNameAdd" />
+      </div>
+      <div v-show="lineType != 'LINE_BREAKS'">
+        <input
+          class="name-new-change"
+          @change="onChangeAdd($event, 'is_show')"
+          type="checkbox"
+          v-model="isAddChecked"
+        />
+        {{ getI18nText("1.9.69", "默认展开") }}
+        <br />
+        <input
+          class="name-new-change"
+          @change="onChangeAdd($event, 'is_not_fold')"
+          type="checkbox"
+          v-model="is_not_foldChecked"
+        />
+        不可折叠
+        <!-- {{ $t("1.9.69") }} -->
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import create from "@/core/create";
+import { Button, Col, Modal, Input, Form, Select, Checkbox, InputNumber } from "ant-design-vue";
+import draggable from "vuedraggable";
+import DragFormLeftItem from "./DragFormLeftItem.vue";
+import DragFormRightItem from "./DragFormRightItem.vue";
+import I18nm from "./I18n-mixins";
+export default create({
+  name: 'drag-layout',
+  components: {
+    [Button.name]: Button,
+    [Select.name]: Select,
+    [Select.Option.name]: Select.Option,
+    [Input.name]: Input,
+    [InputNumber.name]: InputNumber,
+    [Input.TextArea.name]: Input.TextArea,
+    [Checkbox.name]: Checkbox,
+    [Col.name]: Col,
+    AModal: Modal,
+    [Form.name]: Form,
+    [Form.Item.name]: Form.Item,
+    draggable,
+    DragFormLeftItem,
+    DragFormRightItem
+  },
+  mixins: [I18nm],
+  data() {
+    return {
+      modalVisible: false,
+      visibleLineAdd: false,
+
+      modalFormData: {
+        name: "", // 名称
+        alias: "",
+        fieldAlias: "", // 别名
+        elem_width: "12", // 宽度
+        reply_category: [], // 快速回复分类
+        is_fast_reply: false, // 快速输入
+        html_type: "", // 类型
+        is_edit: 1, // 是否可编辑
+        hideExpression: "", // 部分隐藏
+        remark: "", // 字段说明
+        default_val: "", // 默认值
+        placeholder: "", // 字段提示语
+        publicReply: [], // 分类数据
+        is_fast_reply_field: 0 // 快速回复开启
+      },
+      publicReply: [],
+
+      itemTitleNameAdd: "",
+      is_show: 0,
+      is_not_fold: 0,
+      isAddChecked: false,
+      is_not_foldChecked: false,
+
+      handleLIne: "add",
+      lineType: "LINEBAR",
+
+      showFields: [],
+      hideFields: [],
+      curIndex: undefined,
+      editModalType: "edit",
+
+      lineAddTitle: this.getI18nText("1.9.50", "新建分线栏")
+    };
+  },
+  props: {
+    leftList: {
+      type: Array,
+      default: () => []
+    },
+    rightList: {
+      type: Array,
+      default: () => []
+    },
+
+    getpublicReplyList: {
+      type: Function,
+      default: () => Promise.resolve([])
+    }
+  },
+  computed: {
+    isPageLayout() {
+      return (
+        this.modalFormData.html_type === "PAGE_LAYOUT" ||
+        this.modalFormData.html_type === "COMBINATION"
+      );
+    },
+    is_text() {
+      return "TEXT" == this.modalFormData.html_type;
+    },
+    hideModalWidth() {
+      return this.modalFormData.html_type === "COMBINATION";
+    },
+    lineTypeList() {
+      return ["LINEBAR", "LINE_BREAKS"];
+    }
+  },
+  watch: {
+    showFields: {
+      deep: true,
+      handler(val) {
+        this.updateConfig();
+      }
+    },
+    hideFields: {
+      deep: true,
+      handler(val) {
+        this.updateConfig();
+      }
+    }
+  },
+  beforeCreate() {
+    this.form = this.$form.createForm(this);
+  },
+  created() {},
+  mounted() {
+    this.mountedInit();
+    this.$nextTick().then(() => {
+      this.$el.querySelector('.text-area').style.height = this.$el.clientHeight + 'px';
+    });
+  },
+  methods: {
+    mountedInit() {
+      const { rightList, leftList } = this;
+      let checkList = v => Array.isArray(v) && v.length > 0;
+      if (checkList(rightList) || checkList(leftList)) {
+        this.handleSetData({ rightList, leftList });
+      }
+    },
+
+    // 设置数据
+    handleSetData(config = {}) {
+      if (Array.isArray(config.rightList)) {
+        this.$set(this, "showFields", config.rightList);
+      }
+
+      if (Array.isArray(config.leftList)) {
+        this.$set(this, "hideFields", config.leftList);
+      }
+    },
+    handleEdit(data, i, type = "edit") {
+      this.currentIndex = i;
+      this.editModalType = type;
+      if (this.isLineType(data.html_type)) {
+        this.handleLIne = "edit";
+        this.visibleLineAdd = true;
+        this.itemTitleNameAdd = data.fieldAlias || data.name || "分行符";
+        this.is_show = data.is_show;
+        this.is_not_fold = data.is_not_fold;
+        this.isAddChecked = data.is_show == 1;
+        this.is_not_foldChecked = data.is_not_fold == 1;
+        return;
+      }
+      const keyList = [
+        "fieldAlias",
+        "elem_width",
+        "reply_category",
+        "html_type",
+        "is_edit",
+        "remark",
+        "default_val",
+        "line_height",
+        "is_fast_reply_field",
+        "placeholder"
+      ];
+      keyList.forEach(v => {
+        if (v === "reply_category") {
+          if (data[v] && this.$utils.isJSON(data[v])) {
+            this.modalFormData[v] = JSON.parse(data[v]) || [];
+          } else {
+            this.modalFormData[v] = (data[v] && [data[v]]) || [];
+          }
+        } else {
+          this.modalFormData[v] = data[v] || undefined;
+        }
+      });
+      if (!this.publicReply?.length && data["is_fast_reply_field"] != 1) {
+        this.handleReqQieckReplyData();
+      }
+
+      //  其他处理
+      this.modalFormData.is_fast_reply = data.is_fast_reply == 1;
+      this.modalFormData.hideExpression = 0;
+
+      this.modalVisible = true;
+    },
+    // 快速回复
+    async handleReqQieckReplyData() {
+      // this.axios
+      //   .get("/fastReply/getList/all")
+      //   .then(({ data }) => {
+      //     if (data.result === "SUCCESS") {
+      //       this.publicReply = data.map?.organizationReply || [];
+      //     } else {
+      //       this.publicReply = [];
+      //     }
+      //   })
+      //   .catch(err => {
+      //     this.publicReply = [];
+      //     console.log(err);
+      //   });
+      try {
+        let res = await this.getpublicReplyList();
+        this.publicReply = Array.isArray(res) ? res : [];
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    changeCategofy(value) {
+      console.log(value);
+    },
+
+    handleOk(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (err) return;
+        if (this.editModalType == "edit") {
+          this.showFields[this.currentIndex].fieldAlias = values.selectAlias;
+          this.showFields[this.currentIndex].elem_width = values.selectWidth;
+          this.showFields[this.currentIndex].is_fast_reply = this.modalFormData.is_fast_reply
+            ? 1
+            : 0;
+          // 直接赋值，不需要转换的属性
+          let keys = [
+            "reply_category",
+            "remark",
+            "hideExpression",
+            "default_val",
+            "line_height",
+            "placeholder"
+          ];
+          keys.forEach(k => {
+            this.showFields[this.currentIndex][k] = values[k];
+          });
+        } else {
+          this.showFields[this.currentIndex].reply_category = values.reply_category;
+        }
+
+        this.modalVisible = false;
+      });
+    },
+    handleDelete(data, i) {
+      let deleItem = this.showFields.splice(i, 1);
+      // 没有 val_key 的分线栏是中台创建的可以删除，后台创建的移到备选字段
+      if (this.isLineType(data.html_type) && !data.val_key) {
+        return;
+      }
+      this.hideFields.push(...deleItem);
+    },
+    getParams() {
+      return {
+        showFields: this.showFields,
+        hideFields: this.hideFields
+      };
+    },
+
+    addItemShowLine() {
+      this.visibleLineAdd = true;
+      this.itemTitleNameAdd = "";
+      this.is_show = 1;
+      this.is_not_fold = 0;
+      this.isAddChecked = true;
+      this.is_not_foldChecked = false;
+      if (this.lineType === "LINEBAR") {
+        this.lineAddTitle = this.getI18nText("1.9.50", "新建分线栏");
+      } else if (this.lineType === "LINE_BREAKS") {
+        this.lineAddTitle = "新建分行符";
+      }
+    },
+    handlerAddLine() {
+      this.handleLIne = "add";
+      this.lineType = "LINEBAR";
+      this.addItemShowLine();
+    },
+    // 新增分行符
+    handlerAddBranchLine() {
+      this.handleLIne = "add";
+      this.lineType = "LINE_BREAKS";
+      this.addItemShowLine();
+      this.is_show = 1;
+    },
+    onChangeAdd(e, key) {
+      if (e.target.checked == true) {
+        this[key] = 1;
+      } else {
+        this[key] = 0;
+      }
+    },
+    handleCancel() {
+      this.visibleLine = false;
+      this.visibleLineAdd = false;
+    },
+    handleOkLineAdd() {
+      let isL = this.lineType === "LINEBAR";
+      let lineDefaultName = isL ? "分线栏" : "分行符";
+
+      if (this.handleLIne === "edit") {
+        let curItem = this.showFields[this.currentIndex];
+        this.lineType = curItem.html_type;
+        curItem.is_show = this.is_show;
+        if (isL) {
+          curItem.is_not_fold = this.is_not_fold;
+        }
+        // curItem.fieldAlias = this.itemTitleNameAdd;
+        this.$set(curItem, "fieldAlias", this.itemTitleNameAdd || lineDefaultName);
+      } else {
+        // 新建 name
+        this.showFields.push({
+          html_type: this.lineType || "LINEBAR",
+          is_show: this.is_show,
+          is_not_fold: isL ? this.is_not_fold : undefined,
+          name: this.itemTitleNameAdd || lineDefaultName
+        });
+      }
+      this.handleCancel();
+    },
+    leftDragAdd(e) {
+      let { newIndex, oldIndex } = e;
+      if (oldIndex > -1 && oldIndex > -1) {
+        let curItem = this.hideFields[newIndex];
+        if (curItem.is_system_fields == 0) {
+          this.hideFields.splice(newIndex, 1);
+          this.showFields.splice(oldIndex, 0, curItem);
+        }
+      }
+    },
+    handleDragRemove(e) {
+      let { draggedContext = {}, to } = e;
+      let movedItem = draggedContext.element || {};
+      let className = to.className || "";
+
+      if (movedItem.is_drag && movedItem.is_drag == 0 && className.includes("text-draggable")) {
+        return false;
+      }
+    },
+    checkOnChange(e) {
+      this.modalFormData.is_fast_reply = e.target.checked;
+    },
+
+    /** line 类型 */
+    isLineType(t) {
+      return this.lineTypeList.includes(t);
+    },
+
+    visibleChange(e) {
+      // console.log("e", e);
+    },
+
+    /**
+     * 更新配置
+     */
+    updateConfig() {
+      clearTimeout(this.updateTime);
+      this.updateTime = setTimeout(() => {
+        this.$emit("updateConfig", {
+          leftList: this.hideFields,
+          rightList: this.showFields
+        });
+      }, 100);
+    }
+  }
+});
+</script>
+<style lang="less" scoped>
+.drag-layout-container {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  overflow: hidden;
+  overflow-y: auto;
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  border: 1px solid #d2d9e8;
+  text-align: left;
+  .min-height {
+    height: calc(100% - 60px);
+    overflow: hidden;
+    overflow-y: auto;
+    li {
+      list-style: none;
+    }
+  }
+
+  .border-box {
+    position: absolute;
+    top: 0;
+    left: 30%;
+    border-left: 1px solid #d2d9e8;
+    height: 100%;
+  }
+
+  // 左边
+  .text-area {
+    width: 30%;
+    height: 100%;
+    overflow-y: auto;
+    padding: 0 !important;
+
+    // 头部
+    .info-header {
+      display: flex;
+      height: 50px;
+      line-height: 50px;
+      padding: 0 10px;
+      margin-bottom: 10px;
+      color: #2e2e2e;
+      font-size: 18px;
+      font-weight: bold;
+      background: #e6eaef;
+    }
+
+    // 拖拽容器
+    .text-draggable {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 0 12px 12px;
+      box-sizing: border-box;
+      align-content: flex-start;
+      li {
+        width: 49%;
+        text-align: center;
+      }
+    }
+  }
+
+  // 右边
+  .form-area {
+    position: relative;
+    width: 70%;
+    height: 100%;
+    overflow-y: auto;
+    padding: 4px;
+    box-sizing: border-box;
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+    // .add-divider {
+    //   position: absolute;
+    //   right: 8px;
+    //   top: 8px;
+    // }
+    .info-header {
+      height: 50px;
+      margin-bottom: 10px;
+      background: unset;
+
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    /deep/ .combination-col {
+      // padding: 0px 8px 8px;
+      border: 1px solid #cdc5d3;
+      margin-bottom: 10px;
+    }
+
+    .draggable-content {
+      /deep/ .ant-col {
+        transform: none !important;
+      }
+    }
+  }
+}
+
+.dragForm-select-drop {
+  z-index: 2001;
+}
+</style>