cnhis-design-vue 0.2.64-beta → 0.3.2-beta

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

@@ -1,778 +0,0 @@
-<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>