cnhis-design-vue 0.3.8-beta → 0.3.9-beta

package/packages/big-table/src/FieldSet.vue

@@ -0,0 +1,477 @@
+<template>
+  <div ref="settingView" class="setting-view">
+    <n-spin :show="state.spinning" tip="..." style="width: 100%; height: 100%">
+      <div class="fields-set-content">
+        <div class="fields-table">
+          <div class="setting-title" :class="{ 'seting-title-api': !state.isCustomSearch }">
+            <span class="width-show" style="width: 4%"></span>
+            <!-- 字段名称 -->
+            <span class="width-large">所有字段</span>
+            <!-- 显示 -->
+            <span class="width-show">
+              <n-checkbox
+                v-if="showCheckBox('isShow')"
+                :checked="calculateCheck('isShow')"
+                @update:checked="handleAllCheck($event, 'isShow')"
+              />
+              显示
+            </span>
+            <!-- 排序 -->
+            <span class="width-show">
+              <n-checkbox
+                v-if="showCheckBox('isSort')"
+                :checked="calculateCheck('isSort')"
+                @update:checked="handleAllCheck($event, 'isSort')"
+              />
+              排序
+            </span>
+            <!-- 固定 -->
+            <span class="width-showed">固定</span>
+            <slot>
+              <!-- 自定义标题 -->
+              <span class="width-word">自定义标题</span>
+            </slot>
+            <!-- 列宽 -->
+            <span class="width-showed">列宽</span>
+          </div>
+          <div ref="setShow" class="set-show" :class="{ 'set-show-api': !state.isCustomSearch }">
+            <draggable :list="state.fields" animation="150" item-key="sid" tag="ul">
+              <template #item="{ element }">
+                <li
+                  class="left-style"
+                  :style="leftStyle(element)"
+                  @click="handleFieldClick(element)"
+                >
+                  <span class="width-show drag-icon-wrap">
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <span
+                          class="iconfont icon-a-menzhenyishengzhanxitongtubiaotuozhuai"
+                          style="color: #000"
+                        />
+                      </template>
+                      <!-- <c-icon type="pause" :rotate="90" /> -->
+                      <span>拖拽调整顺序</span>
+                    </n-tooltip>
+                  </span>
+                  <!-- 字段名称 -->
+                  <span class="width-large title-item" :class="{ blue: element.extraField }">
+                    <span style="width: 14px; margin-right: 6px"></span>
+                    <span>
+                      {{ element.title }}
+                    </span>
+                  </span>
+                  <!-- 显示 -->
+                  <span class="width-show">
+                    <n-checkbox
+                      v-show="element.sid != '0001'"
+                      :default-checked="element.isShow == '1'"
+                      :checked="element.isShow == '1' ? true : false"
+                      @update:checked="onChangeShow($event, element)"
+                    ></n-checkbox>
+                  </span>
+                  <!-- 排序 -->
+                  <span class="width-show">
+                    <n-checkbox
+                      v-show="element.sid != '0001'"
+                      :default-checked="element.isSort == '1'"
+                      :disabled="element.notParticipatingSort == 1"
+                      :checked="!!element.isSort"
+                      @update:checked="onChangeSort($event, element)"
+                    ></n-checkbox>
+                  </span>
+
+                  <!-- 固定 -->
+                  <span class="width-showed">
+                    <select v-model="element.isFixed" class="is-sort-style">
+                      <option :value="0">不固定</option>
+                      <option :value="1">左固定</option>
+                      <option :value="2">右固定</option>
+                    </select>
+                  </span>
+                  <slot>
+                    <!-- 自定义标题 -->
+                    <span class="width-word">
+                      <input
+                        v-show="element.sid != '0001'"
+                        v-model="element.alias"
+                        class="alias-style"
+                      />
+                    </span>
+                  </slot>
+
+                  <!-- 列宽 -->
+                  <span class="width-showed">
+                    <input v-model="element.colWidth" class="alias-style col-width-style" />
+                  </span>
+                </li>
+              </template>
+            </draggable>
+          </div>
+        </div>
+        <div v-if="props.footerFlag" class="check-options">
+          <div class="btn-operate">
+            <n-button style="margin-right: 8px" @click="onCancle">取消</n-button>
+            <n-button type="primary" @click="handleFieldSave">保存</n-button>
+          </div>
+        </div>
+      </div>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts">
+import create from '@/core/create';
+export default create({
+  name: "FieldSet"
+})
+</script>
+<script lang="ts" setup>
+import { reactive, onMounted, computed, ref, toRefs } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import draggable from "vuedraggable";
+import { NButton, NCheckbox, NSpin, NTooltip } from "naive-ui";
+
+type Ifields = {
+  sid: string;
+  columnName: string; // 字段名
+  isShow: number; // 是否显示
+  isSort: number; // 是否能排序
+  title: string; // 别名
+  alias: string; // 别名
+  isFixed: number; // 固定位置
+  colWidth: number; // 列宽
+  [key: string]: any;
+};
+
+type ItableFields = {
+  id: string;
+  field: string;
+  visible: boolean;
+  sequence: number;
+  sortable: boolean;
+  title: string;
+  fixed: string;
+  minWidth: number;
+}[];
+
+type Iprops = {
+  fields: any[];
+  menuSource: string;
+  drawerDirection: string;
+  footerFlag: Boolean;
+};
+
+type Istate = {
+  spinning: boolean;
+  isCustomSearch: boolean;
+  clickItem: {
+    [key: string]: any;
+  };
+  fields: Ifields[];
+};
+const route = useRoute();
+
+const emit = defineEmits(["onSave", "onClose"]);
+
+const settingView = ref<HTMLInputElement | null>(null);
+
+const props: Iprops = defineProps({
+  fields: {
+    type: Array,
+    default: function () {
+      return [];
+    },
+  },
+  menuSource: {
+    type: String,
+    default: "",
+  },
+  drawerDirection: {
+    type: String,
+    default: "right",
+  },
+  footerFlag: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const state: Istate = reactive({
+  spinning: false,
+  isCustomSearch: true,
+  clickItem: {},
+  fields: props.fields,
+});
+
+onMounted(() => {
+  hideTab();
+});
+
+const leftStyle = (ele: Ifields) => {
+  return {
+    background: state.clickItem.sid === ele.sid ? "#f2f2f2" : undefined,
+  };
+};
+
+const isMiddleAndAdmin = computed(() => props.menuSource == "middle");
+
+const isMenuSource = computed(() => {
+  return route.fullPath.includes("middleListDetail");
+});
+
+const showCheckBox = (key: string) => {
+  return state.fields.some((i: Ifields) => Object.prototype.hasOwnProperty.call(i, key));
+};
+
+const hideTab = () => {
+  if (isMiddleAndAdmin.value) return;
+
+  if (props.drawerDirection === "right") {
+    // settingView.value?.style.setProperty('margin', '-16px 0px 0');
+    settingView.value?.style.setProperty("margin", "auto");
+  } else {
+    settingView.value?.style.setProperty("margin", "auto");
+  }
+};
+const handleFieldSave = () => {
+  let tableFields: ItableFields = [];
+  // let tableView = {};
+  if (state.fields.length > 0) {
+    state.fields.forEach((item: Ifields, i: number) => {
+      tableFields.push({
+        id: item.sid, // 字段id
+        field: item.columnName, // 字段名
+        visible: item.isShow == 1, // 是否显示
+        sequence: i, // 顺序位置
+        sortable: item.isSort == 1, // 是否能排序
+        title: item.alias || item.title, // 别名
+        fixed: item.isFixed ? (item.isFixed == 1 ? "left" : "right") : "", // 固定位置
+        minWidth: item.colWidth, // 列宽
+      });
+    });
+  }
+  // tableView = Object.assign({ pageSize: this.pageSize }, this.tableView);
+  console.log("tableFields", tableFields);
+  emit("onSave", { tableFields });
+};
+const onCancle = () => {
+  emit("onClose");
+};
+const onChangeShow = (e: boolean, ele: Ifields) => {
+  if (e == true) {
+    ele.isShow = 1;
+  } else {
+    ele.isShow = 0;
+  }
+};
+const onChangeSort = (e: boolean, ele: Ifields) => {
+  if (e == true) {
+    ele.isSort = 1;
+  } else {
+    ele.isSort = 0;
+  }
+};
+const onButtonChecked = (e: boolean, itemButton: Ifields) => {
+  if (e == true) {
+    itemButton.isShow = 1;
+  } else {
+    itemButton.isShow = 0;
+  }
+};
+const calculateCheck = (key: string) => {
+  if (!state.fields.length) return false;
+  return state.fields.every((i: Ifields) => {
+    if (!Object.prototype.hasOwnProperty.call(i, key)) return true;
+    return i[key];
+  });
+};
+const handleAllCheck = (e: boolean, key: string) => {
+  const value = e ? 1 : 0;
+  const data = state.fields.map((i: Ifields) => {
+    if (Object.prototype.hasOwnProperty.call(i, key)) {
+      i[key] = value;
+    }
+    return i;
+  });
+  state.fields = data;
+};
+const handleFieldClick = (item: Ifields) => {
+  state.clickItem = item;
+};
+</script>
+<style scoped lang="less">
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+.fields-set-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .fields-table {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+}
+
+.setting-view {
+  height: 100%;
+  position: relative;
+  :deep(.n-spin-container) {
+    width: 100%;
+    height: 100%;
+  }
+  :deep(.n-spin-content) {
+    height: 100%;
+  }
+  .setting-title {
+    background: #f2f2f4;
+    border: 1px solid #f2f2f2;
+    height: 52px;
+    line-height: 52px;
+    span {
+      display: inline-block;
+    }
+    &.seting-title-api {
+      .width-large {
+        width: 15%;
+      }
+    }
+  }
+  .set-show {
+    min-height: 100px;
+    overflow-y: auto;
+    &.set-show-api {
+      .width-large {
+        width: 15%;
+      }
+    }
+
+    .left-style.sortable-chosen {
+      background: #fafafa;
+      box-shadow: 0px 0px 10px 0px #d5d5d5;
+    }
+
+    li {
+      padding: 5px 0;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #e8e8e8;
+      height: 52px;
+      line-height: 52px;
+    }
+    .alias-style {
+      outline: none;
+      border-radius: 4px 4px 4px 4px;
+      border: solid 1px #d5d5d5;
+      height: 32px;
+      text-indent: 16px;
+      color: #38454f;
+      width: 100%;
+    }
+    .is-sort-style {
+      outline: none;
+      border-radius: 4px 4px 4px 4px;
+      border: solid 1px #d5d5d5;
+      height: 32px;
+      text-indent: 6px;
+      color: #38454f;
+      width: 87px;
+      margin-right: 5px;
+      &:disabled {
+        cursor: not-allowed;
+        background: #f5f5f5;
+      }
+    }
+    .col-width-style {
+      width: 70px;
+    }
+    .title-item {
+      display: inline-flex;
+      justify-content: flex-start;
+      align-items: center;
+      text-align: left;
+      > span {
+        display: inline-block;
+        max-width: calc(100% - 20px);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  .alias-style {
+    outline: none;
+    border-radius: 4px 4px 4px 4px;
+    border: solid 1px rgba(212, 222, 229, 1);
+    height: 32px;
+    text-indent: 16px;
+    color: #38454f;
+  }
+  .btn-operate {
+    border-top: 1px solid #d5d5d5;
+    padding: 12px 0 12px;
+  }
+
+  .width-show {
+    display: inline-block;
+    width: 10%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .drag-icon-wrap {
+    width: 5% !important;
+    cursor: pointer;
+    text-align: center;
+  }
+  .width-showed {
+    display: inline-block;
+    width: 15%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    select {
+      width: 90% !important;
+    }
+  }
+  .width-word {
+    display: inline-block;
+    width: 20%;
+    line-height: 52px;
+    overflow: hidden;
+    white-space: nowrap;
+    input {
+      width: 90% !important;
+    }
+  }
+  .width-large {
+    display: inline-block;
+    width: 20%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>
+<style>
+.popver-content {
+  height: 400px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.popver-ul {
+  margin-bottom: 10px;
+}
+.ul-title {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(145, 159, 190, 1);
+  line-height: 20px;
+}
+</style>

package/packages/big-table/src/assets/style/table-base.less

@@ -3,10 +3,10 @@ body {
     display: none !important;
   }
 }
-.big-table {
+.custom-big-table {
   position: relative;
 
-  &:deep(.img-wrap) {
+  .img-wrap {
     padding: 2px 0;
     line-height: 1;
     height: 100%;
@@ -54,21 +54,21 @@ body {
   }
 
   /* 行内表单样式 */
-  &:deep(.base-form) {
+  .base-form {
     overflow: hidden !important;
     display: flex;
     align-items: center;
     width: 100%;
   }
-  &:deep(.base-form-content) {
+  .base-form-content {
     width: 100%;
   }
-  &:deep(textarea) {
+  textarea {
     height: 32px;
     margin-bottom: 0;
     resize: none;
   }
-  &:deep(.formItem-select-multiple) {
+  .formItem-select-multiple {
     display: flex;
     align-items: center;
     width: 100%;
@@ -82,7 +82,7 @@ body {
   }
 
   &.expand-padding {
-    &:deep(.vxe-table .vxe-body--expanded-cell) {
+    .vxe-table .vxe-body--expanded-cell {
       padding-left: 66px !important;
       padding-right: 66px !important;
     }
@@ -94,7 +94,7 @@ body {
   .row-btn {
     margin-right: 10px;
   }
-  &:deep(.vxe-table) {
+  .vxe-table {
     transform: translateZ(0);
     .vxe-table--empty-content {
       width: 100%;
@@ -155,7 +155,7 @@ body {
       }
     }
   }
-  &:deep(.filter-box) {
+  .filter-box {
     display: flex;
     align-items: center;
     width: 100%;
@@ -175,7 +175,7 @@ body {
       border-right-color: #5585f5;
     }
   }
-  &:deep(.disabled-checked-tips) {
+  .disabled-checked-tips {
     position: absolute;
     left: 6px;
     top: 50%;
@@ -201,81 +201,77 @@ body {
       top: 0;
     }
   }
-}
-
-.refresh {
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  box-shadow: 0px 2px 4px 0px rgba(108, 108, 108, 0.13);
-  color: #5585f5;
-  font-size: 12px;
-  height: 27px;
-
-  position: absolute;
-  right: 0;
-  top: 6px;
-  z-index: 1;
-
-  padding-left: 14px;
-  padding-right: 14px;
-  border-top-left-radius: 14px;
-  border-bottom-left-radius: 14px;
-
-  cursor: pointer;
-}
-.refresh-row {
-  margin-left: 3px;
-  margin-bottom: 0;
-}
-
-.check-wrap {
-  background: #ffffe9;
-  display: block;
-  width: 100%;
-  line-height: 26px;
-  display: flex;
-  justify-content: center;
-
-  position: absolute;
-  margin-top: -26px;
-
-  .check-wrap-title,
-  .check-wrap-btn {
-    color: #000000;
-    font-size: 12px;
-    margin-bottom: 0px;
-    cursor: pointer;
+  .form-select-table {
+    .n-base-select-menu__empty {
+      display: none;
+    }
   }
-
-  .check-wrap-btn {
+  .percent-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    .percent-value {
+      line-height: 1;
+      margin-bottom: -4px;
+      margin-top: 4px;
+    }
+  }
+  .refresh {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    box-shadow: 0px 2px 4px 0px rgba(108, 108, 108, 0.13);
     color: #5585f5;
+    font-size: 12px;
+    height: 27px;
+  
+    position: absolute;
+    right: 0;
+    top: 6px;
+    z-index: 1;
+  
+    padding-left: 14px;
+    padding-right: 14px;
+    border-top-left-radius: 14px;
+    border-bottom-left-radius: 14px;
+  
+    cursor: pointer;
   }
-}
-
-.percent-wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  .percent-value {
-    line-height: 1;
-    margin-bottom: -4px;
-    margin-top: 4px;
+  .refresh-row {
+    margin-left: 3px;
+    margin-bottom: 0;
   }
-}
-.domPropsInnerHTML-span {
-  height: 100%;
-  &:deep(img) {
-    display: inline-block;
-    height: var(--tableImageHeight);
-    width: var(--tableImageWidth);
+  .check-wrap {
+    background: #ffffe9;
+    display: block;
+    width: 100%;
+    line-height: 26px;
+    display: flex;
+    justify-content: center;
+  
+    position: absolute;
+    margin-top: -26px;
+  
+    .check-wrap-title,
+    .check-wrap-btn {
+      color: #000000;
+      font-size: 12px;
+      margin-bottom: 0px;
+      cursor: pointer;
+    }
+  
+    .check-wrap-btn {
+      color: #5585f5;
+    }
   }
-}
-
-.select-table {
-  :deep(.n-base-select-menu__empty) {
-    display: none;
+  .domPropsInnerHTML-span {
+    height: 100%;
+    img {
+      display: inline-block;
+      height: var(--tableImageHeight);
+      width: var(--tableImageWidth);
+    }
   }
 }

package/packages/big-table/src/assets/style/table-global.less

@@ -165,11 +165,3 @@
     height: 20px;
   }
 }
-
-.big-table {
-  .form-select-table {
-    .n-base-select-menu__empty {
-      display: none;
-    }
-  }
-}