cnhis-design-vue 0.3.1-beta → 0.3.4-beta

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

@@ -0,0 +1,712 @@
+<template>
+  <div class="drag-layout-container" ref="dragLayoutContainer">
+    <div class="border-box"></div>
+    <!-- 左边 -->
+    <div class="text-area" ref="textArea">
+      <div class="info-header">备选字段</div>
+      <draggable
+        class="min-height text-draggable"
+        itemKey="val_key"
+        v-model="state.hideFields"
+        group="formitem"
+        :animation="300"
+        ref="textDraggable"
+        @add="leftDragAdd"
+      >
+        <template #item="{ element }" tag="li">
+          <li>
+            <slot name="leftItem" :itemData="element">
+              <DragFormLeftItem :element="element" />
+            </slot>
+          </li>
+        </template>
+      </draggable>
+    </div>
+    <!-- 右边 -->
+    <div class="form-area">
+      <div class="info-header">
+        <NButton class="add-divider" dashed size="small" @click="handlerAddBranchLine"
+          >新建分行符</NButton
+        >
+        <NButton class="add-divider" dashed size="small" @click="handlerAddLine">新建分线栏</NButton>
+      </div>
+      <draggable
+        class="min-height draggable-content"
+        itemKey="val_key"
+        v-model="state.showFields"
+        :move="handleDragRemove"
+        group="formitem"
+        :animation="300"
+        filter=".undraggable"
+      >
+        <template #item="{ element, index }">
+          <div
+            :style="{ 
+              width: `${(element.elem_width || 12) * 2 / 24 * 100}%`,
+              display: element.elem_width && element.elem_width < 12 ? 'inline-block': 'block'
+            }"
+            :class="{
+              'combination-col': element.html_type === 'COMBINATION'
+            }"
+          >
+            <slot name="rightItem" :itemData="element">
+              <DragFormRightItem
+                :element="element"
+                :index="index"
+                @handleEdit="handleEdit"
+                @handleDelete="handleDelete"
+              />
+            </slot>
+          </div>
+        </template>
+      </draggable>
+    </div>
+
+    <!-- 弹窗 -->
+    <NModal
+      preset="dialog"
+      title="字段属性"
+      positive-text="确认"
+      negative-text="取消"
+      :show-icon="false"
+      :zIndex="2001"
+      v-model:show="state.modalVisible"
+      @positive-click="handleOk"
+      v-if="state.modalVisible"
+    >
+      <NForm ref="formRef" :model="state.modalFormData" :rules="rules" label-placement="left" label-width="auto">
+        <NGrid>
+          <!-- 名称 -->
+          <NFormItemGi
+            v-if="!is_text"
+            :span="18"
+            label="名称"
+          >
+            <NInput
+              placeholder="名称"
+              v-model:value="state.modalFormData.name"
+            />
+          </NFormItemGi>
+          <template v-if="!isPageLayout">
+            <!-- 默认值 -->
+            <NFormItemGi
+              v-if="!is_text"
+              :span="18"
+              label="默认值"
+            >
+              <NInput
+                placeholder="默认值"
+                v-model:value="state.modalFormData.default_val"
+              />
+            </NFormItemGi>
+          </template>
+
+          <!--  宽度 -->
+          <NFormItemGi
+            v-if="!hideModalWidth"
+            :span="18"
+            label="宽度"
+          >
+            <NSelect
+              :options="state.widthOptions"
+              v-model:value="state.modalFormData.elem_width"
+            >
+            </NSelect>
+          </NFormItemGi>
+
+          <!-- 高度 -->
+          <NFormItemGi
+            v-if="isPageLayout && !hideModalWidth"
+            :span="18"
+            label="高度（行）"
+          >
+            <NInput
+              placeholder="高度（行）"
+              v-model:value="state.modalFormData.line_height"
+            />
+          </NFormItemGi>
+          <template v-if="!is_text">
+            <!-- 说明文本 -->
+            <NFormItemGi
+              v-if="!isPageLayout"
+              :span="18"
+              label="说明文本"
+            >
+              <NInput
+                placeholder="说明文本"
+                v-model:value="state.modalFormData.placeholder"
+              />
+            </NFormItemGi>
+
+            <NFormItemGi
+              v-if="state.modalFormData.html_type != 'PAGE_LAYOUT'"
+              :span="18"
+              :label="'问号提示'"
+            >
+              <NInput
+                :maxLength="200"
+                placeholder="请输入问号提示"
+                v-model:value="state.modalFormData.remark"
+              />
+            </NFormItemGi>
+          </template>
+
+          <template
+            v-if="
+              state.modalFormData.is_fast_reply_field != 1 &&
+                (state.modalFormData.html_type == 'TEXTAREA' || state.modalFormData.html_type == 'INPUT')
+            "
+          >
+            <!-- 快速输入 -->
+            <NFormItemGi
+              :span="18"
+              label="快速输入"
+            >
+              <NCheckbox :checked="state.modalFormData.is_fast_reply" @on-update:checked="checkOnChange"></NCheckbox>
+            </NFormItemGi>
+            <!-- 回复分类 -->
+            <NFormItemGi
+              v-if="state.modalFormData.is_fast_reply"
+              :span="18"
+              :label="'短语分类'"
+              path="reply_category"
+            >
+              <NSelect
+                multiple
+                v-model:value="state.modalFormData.reply_category"
+                filterable
+                :filter="vexutils.filterOption"
+                placeholder="分类名称"
+                @update:value="changeCategofy"
+                :options="state.publicReply"
+              >
+              </NSelect>
+            </NFormItemGi>
+            <!-- 部分隐藏 -->
+            <NFormItemGi
+              v-show="state.modalFormData.is_edit == 0"
+              label="部分隐藏"
+              :span="18"
+            >
+              <NInputNumber
+                placeholder="请输入"
+                v-model:value="state.modalFormData.hideExpression"
+              />
+            </NFormItemGi>
+          </template>
+
+          <!-- 动态文本值 -->
+          <NFormItemGi v-if="is_text" :label="'文本内容(支持FreeMarker)'">
+            <NInput
+              placeholder="请输入动态文本内容"
+              type="textarea"
+              v-model:value="state.modalFormData.default_val"
+            />
+          </NFormItemGi>
+        </NGrid>
+      </NForm>
+    </NModal>
+
+    <NModal
+      preset="dialog"
+      :title="state.lineAddTitle"
+      positive-text="确认"
+      negative-text="取消"
+      :show-icon="false"
+      :zIndex="2001"
+      v-model:show="state.visibleLineAdd"
+      @negative-click="handleCancel"
+      @positive-click="handleOkLineAdd"
+    >
+      <div>
+        <label class="new-name">名称</label>
+        <NInput class="view-model-input new-name-input" v-model:value="state.itemTitleNameAdd" />
+      </div>
+      <div v-show="state.lineType != 'LINE_BREAKS'">
+        <input
+          class="name-new-change"
+          @change="onChangeAdd($event, 'is_show')"
+          type="checkbox"
+          v-model="state.isAddChecked"
+        />
+        默认展开
+        <br />
+        <input
+          class="name-new-change"
+          @change="onChangeAdd($event, 'is_not_fold')"
+          type="checkbox"
+          v-model="state.is_not_foldChecked"
+        />
+        不可折叠
+        <!-- {{ $t("1.9.69") }} -->
+      </div>
+    </NModal>
+  </div>
+</template>
+
+<script lang="ts">
+import create from '@/core/create';
+export default create({
+  name: "DragLayout"
+})
+</script>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
+import { NGrid, NGridItem, NFormItemGi, NButton, NModal, NForm, NFormItem, NInput, NSelect, NCheckbox, NInputNumber, FormRules, FormInst } from 'naive-ui'
+import draggable from "vuedraggable";
+import DragFormLeftItem from "./DragFormLeftItem.vue";
+import DragFormRightItem from "./DragFormRightItem.vue";
+import vexutils from '@/utils/vexutils';
+
+const dragLayoutContainer: any = ref(null)
+const textArea: any = ref(null)
+const formRef = ref<FormInst | null>(null)
+
+const state: any = reactive({
+  modalVisible: false,
+  visibleLineAdd: false,
+
+  modalFormData: {
+    name: '', // 名称
+    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: '新建分线栏',
+  widthOptions: [
+    {
+      label: "整行",
+      value: '12',
+      class: 'dragForm-select-drop'
+    },
+    {
+      label: "半行",
+      value: '6',
+      class: 'dragForm-select-drop'
+    },
+    {
+      label: '5/6',
+      value: '10',
+      class: 'dragForm-select-drop'
+    },
+    {
+      label: '2/3',
+      value: '8',
+      class: 'dragForm-select-drop'
+    },
+    {
+      label: '1/3',
+      value: '4',
+      class: 'dragForm-select-drop'
+    },
+    {
+      label: '3/4',
+      value: '9',
+      class: 'dragForm-select-drop'
+    },
+    {
+      label: '1/4',
+      value: '3',
+      class: 'dragForm-select-drop'
+    }
+  ]
+})
+
+const rules: FormRules = {
+  reply_category: [
+    {
+      required: state.modalFormData.is_fast_reply,
+      trigger: ['blur', 'change'],
+      message: '请输入'
+    }
+  ]
+}
+
+const props = withDefaults(defineProps<{
+  leftList?: any[]
+  rightList?: any[]
+  getpublicReplyList?: Function
+}>(), {
+  leftList: () => [],
+  rightList: () => [],
+  getpublicReplyList: () => Promise.resolve([])
+})
+
+const emit = defineEmits(['updateConfig']);
+
+const isPageLayout = computed(() => state.modalFormData.html_type === "PAGE_LAYOUT" || state.modalFormData.html_type === "COMBINATION")
+const is_text = computed(() => state.modalFormData.html_type === "TEXT")
+const hideModalWidth = computed(() => state.modalFormData.html_type === "COMBINATION")
+const lineTypeList = computed(() => ["LINEBAR", "LINE_BREAKS"])
+
+/** line 类型 */
+const isLineType = (t: any) => {
+  return lineTypeList.value.includes(t);
+}
+// 快速回复
+const handleReqQieckReplyData = async () => {
+  // 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 props.getpublicReplyList();
+    state.publicReply = Array.isArray(res) ? res : [];
+  } catch (error) {
+    console.log(error);
+  }
+}
+const handleEdit = (data: any, i: any, type = "edit") => {
+  state.currentIndex = i;
+  state.editModalType = type;
+  if (isLineType(data.html_type)) {
+    state.handleLIne = "edit";
+    state.visibleLineAdd = true;
+    state.itemTitleNameAdd = data.name || "分行符";
+    state.is_show = data.is_show;
+    state.is_not_fold = data.is_not_fold;
+    state.isAddChecked = data.is_show == 1;
+    state.is_not_foldChecked = data.is_not_fold == 1;
+    return;
+  }
+  const keyList = [
+    "name",
+    "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] && vexutils.isJSON(data[v])) {
+        state.modalFormData[v] = JSON.parse(data[v]) || [];
+      } else {
+        state.modalFormData[v] = (data[v] && [data[v]]) || [];
+      }
+    } else {
+      state.modalFormData[v] = data[v] || undefined;
+    }
+  });
+  if (!state.publicReply?.length && data["is_fast_reply_field"] != 1) {
+    handleReqQieckReplyData();
+  }
+
+  //  其他处理
+  state.modalFormData.is_fast_reply = data.is_fast_reply == 1;
+  state.modalFormData.hideExpression = 0;
+
+  state.modalVisible = true;
+}
+    
+const changeCategofy = (value: any) => {
+  console.log(value);
+}
+
+const handleOk = (e: any) => {
+  // e.preventDefault();
+  formRef.value?.validate((errors) => {
+    if (errors) return;
+    if (state.editModalType == "edit") {
+      state.showFields[state.currentIndex].is_fast_reply = state.modalFormData.is_fast_reply ? 1 : 0;
+      // 直接赋值，不需要转换的属性
+      let keys = [
+        "name",
+        "elem_width",
+        "reply_category",
+        "remark",
+        "hideExpression",
+        "default_val",
+        "line_height",
+        "placeholder"
+      ];
+      keys.forEach(k => {
+        state.showFields[state.currentIndex][k] = state.modalFormData[k];
+      });
+    } else {
+      state.showFields[state.currentIndex].reply_category = state.modalFormData.reply_category;
+    }
+
+    state.modalVisible = false;
+  })
+}
+const handleDelete = (data: any, i: any) => {
+  let deleItem = state.showFields.splice(i, 1);
+  // 没有 val_key 的分线栏是中台创建的可以删除，后台创建的移到备选字段
+  if (isLineType(data.html_type) && !data.val_key) {
+    return;
+  }
+  state.hideFields.push(...deleItem);
+}
+const getParams = () => {
+  return {
+    showFields: state.showFields,
+    hideFields: state.hideFields
+  };
+}
+const addItemShowLine = () => {
+  state.visibleLineAdd = true;
+  state.itemTitleNameAdd = "";
+  state.is_show = 1;
+  state.is_not_fold = 0;
+  state.isAddChecked = true;
+  state.is_not_foldChecked = false;
+  if (state.lineType === "LINEBAR") {
+    state.lineAddTitle = '新建分线栏';
+  } else if (state.lineType === "LINE_BREAKS") {
+    state.lineAddTitle = "新建分行符";
+  }
+}
+const handlerAddLine = () => {
+  state.handleLIne = "add";
+  state.lineType = "LINEBAR";
+  addItemShowLine();
+}
+// 新增分行符
+const handlerAddBranchLine = () => {
+  state.handleLIne = "add";
+  state.lineType = "LINE_BREAKS";
+  addItemShowLine();
+  state.is_show = 1;
+}
+const onChangeAdd = (e: any, key: string) => {
+  if (e.target.checked == true) {
+    state[key] = 1;
+  } else {
+    state[key] = 0;
+  }
+}
+const handleCancel = () => {
+  state.visibleLine = false;
+  state.visibleLineAdd = false;
+}
+const handleOkLineAdd = () => {
+  let isL = state.lineType === "LINEBAR";
+  let lineDefaultName = isL ? "分线栏" : "分行符";
+
+  if (state.handleLIne === "edit") {
+    let curItem = state.showFields[state.currentIndex];
+    state.lineType = curItem.html_type;
+    curItem.is_show = state.is_show;
+    if (isL) {
+      curItem.is_not_fold = state.is_not_fold;
+    }
+    curItem['name'] = state.itemTitleNameAdd || lineDefaultName;
+  } else {
+    // 新建 name
+    state.showFields.push({
+      html_type: state.lineType || "LINEBAR",
+      is_show: state.is_show,
+      is_not_fold: isL ? state.is_not_fold : undefined,
+      name: state.itemTitleNameAdd || lineDefaultName
+    });
+  }
+  handleCancel();
+}
+const leftDragAdd = (e: any) => {
+  let { newIndex, oldIndex } = e;
+  if (oldIndex > -1 && oldIndex > -1) {
+    let curItem = state.hideFields[newIndex];
+    if (curItem.is_system_fields == 0) {
+      state.hideFields.splice(newIndex, 1);
+      state.showFields.splice(oldIndex, 0, curItem);
+    }
+  }
+}
+const handleDragRemove = (e: any) => {
+  console.log('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;
+  }
+}
+const checkOnChange = (e: any) => {
+  state.modalFormData.is_fast_reply = e.target.checked;
+}
+const visibleChange = (e: any) => {
+  // console.log("e", e);
+}
+/**
+ * 更新配置
+ */
+const updateConfig = () => {
+  clearTimeout(state.updateTime);
+  state.updateTime = setTimeout(() => {
+    emit("updateConfig", {
+      leftList: state.hideFields,
+      rightList: state.showFields
+    });
+  }, 100);
+}
+// const getI18nText = (i: any, d: any) => {
+//   if (Array.isArray(i)) {
+//     return $t ? $t.apply(this, i) : d;
+//   }
+//   return $t ? $t(i) : d;
+// }
+// 设置数据
+const handleSetData = (config: any = {}) => {
+  if (Array.isArray(config.rightList)) {
+    state.showFields = config.rightList;
+  }
+
+  if (Array.isArray(config.leftList)) {
+    state.hideFields = config.leftList;
+  }
+}
+const mountedInit = () => {
+  const { rightList, leftList } = props;
+  let checkList = (v: any) => Array.isArray(v) && v.length > 0;
+  if (checkList(props.rightList) || checkList(props.leftList)) {
+    handleSetData({ rightList, leftList });
+  }
+}
+
+onMounted(() => {
+  mountedInit()
+  nextTick(() => {
+    textArea.value.style.height = dragLayoutContainer.value.clientHeight + 'px';
+  })
+})
+
+watch(
+  [state.showFields, state.hideFields],
+  ([showFields, hideFields]: any) => {
+   updateConfig()
+  },
+  { deep: true }
+)
+</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;
+    }
+    .info-header {
+      height: 50px;
+      margin-bottom: 10px;
+      background: unset;
+
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .combination-col {
+      border: 1px solid #cdc5d3;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.dragForm-select-drop {
+  z-index: 2001;
+}
+</style>