cnhis-design-vue 3.1.1 → 3.1.4-beta.1

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

@@ -1,712 +0,0 @@
-<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.js';
-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.js';
-
-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>