调整一些样式优化

lihua
Showing 9 changed files with 98 additions and 71 deletions
src/assets/styles/element-plus/index.scss
src/components/EllipsisTooltip.vue
src/components/Table/index.vue
src/views/data_asset/registerCatalogDetail.vue
src/views/data_service/apiManagement.vue
src/views/data_smart_contract/components/strategyTable.vue
src/views/data_smart_contract/contractRecordManage.vue
src/views/data_smart_contract/smartContractDetail.vue
src/views/data_smart_contract/smartContractManagement.vue
--- a/src/assets/styles/element-plus/index.scss
View file @f6416c1
+++ b/src/assets/styles/element-plus/index.scss
View file @f6416c1
@@ -191,6 +191,7 @@
    &::placeholder {
      color: #b2b2b2;
+      opacity: 1;
    }
  }
@@ -204,6 +205,15 @@
  }
 }
+.el-date-editor {
+  .el-range-input::placeholder {
+    font-family: simsun;
+    font-weight: 400;
+    color: #b2b2b2;
+    opacity: 1; /* 确保颜色完全显示，某些浏览器可能会降低 placeholder 的不透明度 */
+  }
+}
 .el-textarea {
  --el-input-text-color: var(--el-color-regular);
 }
@@ -1210,3 +1220,12 @@
  height: 26px;
  line-height: 26px;
 }
+/** 策略管理详情表格不显示纵向滚动条 */
+.el-table.no-scroll-vertical {
+  .el-table__body-wrapper {
+    .el-scrollbar__bar.is-vertical {
+      display: none !important;
+    }
+  }
+}
--- a/src/components/EllipsisTooltip.vue
View file @f6416c1
+++ b/src/components/EllipsisTooltip.vue
View file @f6416c1
@@ -47,9 +47,10 @@ const setRefMap = (el: any, item: string) => {
 }
 const onMouseOver = (str) => {
-  let parentWidth = refMap?.[str]?.parentNode?.offsetWidth;
+  let rect = refMap?.[str]?.parentNode?.getBoundingClientRect();
+  let parentWidth = rect?.width;
  let parentHeight = refMap?.[str]?.parentNode?.offsetHeight;
-  let contentWidth = refMap?.[str]?.offsetWidth;
+  let contentWidth = refMap?.[str]?.getBoundingClientRect()?.width;
  let contentHeight = refMap?.[str]?.offsetHeight;
  // 判断是否开启tooltip功能
--- a/src/components/Table/index.vue
View file @f6416c1
+++ b/src/components/Table/index.vue
View file @f6416c1
@@ -243,7 +243,7 @@ onMounted(() => {
    height: props.tableInfo.height ?? '100%',
    'min-height': props.tableInfo.minPanelHeight ?? ''
  }">
-    <el-table ref="tableRef" :class="{ 'no-edit': props.tableInfo.readonly, 'sort-table': props.tableInfo.sortable }"
+    <el-table ref="tableRef" :class="[ props.tableInfo.readonly ? 'no-edit' : '', props.tableInfo.sortable ? 'sort-table' : '', props.tableInfo.class || '']"
      :data="tableData" :highlight-current-row="props.tableInfo.heightlightRow ?? true"
      :show-header="props.tableInfo.showHeader ?? true" stripe :border="props.tableInfo.border
        ?? true" :height="props.tableInfo.height === null ? null : (props.tableInfo.height ?? '100%')"
@@ -534,7 +534,7 @@ onMounted(() => {
          }}</span>
        </template>
      </el-table-column>
-      <el-table-column :width="actionInfo.width" :class-name="actionInfo.columClass" fixed="right"
+      <el-table-column :width="actionInfo.width" :class-name="actionInfo.columClass" :fixed="actionInfo.fixed ?? 'right'"
        v-if="actionInfo.show ?? true">
        <template #header>
          <div class="header_title">
--- a/src/views/data_asset/registerCatalogDetail.vue
View file @f6416c1
+++ b/src/views/data_asset/registerCatalogDetail.vue
View file @f6416c1
@@ -336,14 +336,19 @@ const getDetailInfo = () => {
 /** ----------------- 数据包信息 --------------------- */
 const productTableInfo = ref({
  id: "input-product-table",
-  height: '214px',
+  height: 'auto',
+  minPanelHeight: '40px',
+  minHeight: '40px',
+  class: 'no-scroll-vertical',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "服务名称", field: "apiName", width: 180 },
-    { label: "API类型", field: "apiType", width: 100, getName: (scope) => {
+    {
+      label: "API类型", field: "apiType", width: 100, getName: (scope) => {
        return scope.row.apiType && apiTypes.find(a => a.value == scope.row.apiType)?.label;
-    } },
+      }
-    { label: "API地址", field: "requestUrl", width: 240 },
+    },
+    { label: "API地址", field: "requestUrl", width: 'auto', minWidth: 200 },
    { label: "描述", field: "apiDescription", width: 240 },
  ],
  data: [],
@@ -351,9 +356,10 @@ const productTableInfo = ref({
  actionInfo: {
    label: "操作",
    type: "btn",
+    fixed: false,
    show: !detailInfo.value.nodeId && (route.query.foundMode == 'read' || route.query.foundMode == 'download'),
    isMore: false,
-    width: 130,
+    width: 90,
    btns: (scope) => {
      let arrBtns: any = [];
      //若是使用方，则换一个api地址。使用操作是查看时可以查看
@@ -1415,7 +1421,7 @@ const respParamsTableInfo = ref({
          </div>
      </ContentWrap>
      <ContentWrap v-if="productTableInfo.data?.length" id="product-info" title="服务包信息" style="margin: 16px 16px 16px">
-        <Table ref="productTableRef" :tableInfo="productTableInfo" class="fiveRow-table" />
+        <Table ref="productTableRef" :tableInfo="productTableInfo" />
      </ContentWrap>
      <ContentWrap v-if="isJSZQ" id="id-paramsInfo" title="入参出参信息" description="" style="margin: 16px 16px 16px">
        <el-tabs v-model="activeTabName" class="param-tabs">
@@ -1430,10 +1436,9 @@ const respParamsTableInfo = ref({
      <ContentWrap id="id-table" title="资源表" v-if="detailInfo.damCatalogTableInfo?.length" description=""
        style="margin: 16px 16px 16px">
        <el-table v-show="!fullscreenLoading" ref="tableRef" :data="detailInfo.damCatalogTableInfo"
-          :highlight-current-row="true" stripe border @expand-change="handleTableExpandChange" height="100%"
+          :highlight-current-row="true" stripe border @expand-change="handleTableExpandChange" max-height="350"
          tooltip-effect="light" row-key="guid" :style="{
            width: '100%',
-            height: '350px',
            display: 'inline-block',
          }">
          <el-table-column type="expand">
@@ -1489,11 +1494,11 @@ const respParamsTableInfo = ref({
          </el-table-column>
          <el-table-column label="序号" type="index" width="56px" align="center" show-overflow-tooltip>
          </el-table-column>
-          <el-table-column prop="tableChName" label="表中文名称" width="150px" align="left" show-overflow-tooltip>
+          <el-table-column prop="tableChName" label="表中文名称" width="160px" align="left" show-overflow-tooltip>
          </el-table-column>
-          <el-table-column prop="tableName" label="表英文名称" width="150px" align="left" show-overflow-tooltip>
+          <el-table-column prop="tableName" label="表英文名称" width="140px" align="left" show-overflow-tooltip>
          </el-table-column>
-          <el-table-column prop="dataCount" label="表数据总数(条)" width="150px" align="right" show-overflow-tooltip>
+          <el-table-column prop="dataCount" label="表数据总数(条)" width="140px" align="right" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row["dataCount"] == null ? '--' : changeNum(scope.row["dataCount"], 0) }}</span>
            </template>
@@ -1508,13 +1513,13 @@ const respParamsTableInfo = ref({
              <span>{{ scope.row["updateUserName"] || '--' }}</span>
            </template>
          </el-table-column>
-          <el-table-column prop="updateTime" label="修改时间" width="180px" align="left" show-overflow-tooltip>
+          <el-table-column prop="updateTime" label="修改时间" width="170px" align="left" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row["updateTime"] || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="!detailInfo.nodeId || foundMode == 'download' || foundMode == 'read' || foundMode == 'readAndDown'"
-            width="220px" align="left" fixed="right" show-overflow-tooltip>
+            :width="foundMode == 'readAndDown' ? '220px' : '140px'" align="left" fixed="right" show-overflow-tooltip>
            <template #default="scope">
              <!-- 如果是下载，就只显示下载，如果是查看和下载就都显示，就两个按钮都显示。仅查看，就仅查看 -->
              <span v-show="foundMode != 'download'" class="text_btn" @click="handleTableViewData(scope)">查看样例数据</span>
--- a/src/views/data_service/apiManagement.vue
View file @f6416c1
+++ b/src/views/data_service/apiManagement.vue
View file @f6416c1
@@ -163,17 +163,17 @@ const tableInfo = ref({
    {
      label: "平均响应时间(s)", field: "averageRespTime", width: 130, align: 'right', type: 'chnum'
    },
-    {
+    // {
-      label: "绑定连接器数", field: "bindingCount", width: 130, align: 'right', type: "text_btn", value: "detail", click: (scope) => {
+    //   label: "绑定连接器数", field: "bindingCount", width: 130, align: 'right', type: "text_btn", value: "detail", click: (scope) => {
-        if (!scope.row.bindingCount) {
+    //     if (!scope.row.bindingCount) {
-          proxy.$ElMessage.warning('当前没有绑定连接器');
+    //       proxy.$ElMessage.warning('当前没有绑定连接器');
-          return;
+    //       return;
-        }
+    //     }
-        //TODO, 查看连接器信息。
+    //     //TODO, 查看连接器信息。
-      }, getName: (scope) => {
+    //   }, getName: (scope) => {
-        return scope.row.bindingCount != null ? changeNum(scope.row.bindingCount ?? 0) : '--';
+    //     return scope.row.bindingCount != null ? changeNum(scope.row.bindingCount ?? 0) : '--';
-      }
+    //   }
-    },
+    // },
    { label: "API请求路径", field: "requestUrl", width: TableColumnWidth.DESCRIPTION },
    {
      label: '状态', field: 'apiState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 96, align: 'center'
--- a/src/views/data_smart_contract/components/strategyTable.vue
View file @f6416c1
+++ b/src/views/data_smart_contract/components/strategyTable.vue
View file @f6416c1
@@ -3,11 +3,11 @@
    <div class="h-title">策略信息</div>
    <el-button v-if="!isLook" plain @click="invokeTemplate" v-preReClick>合约模板调用</el-button>
  </div>
-  <el-table class="strategyTable" ref="strategyTableRef" v-loading="strategyDataLoading" :data="strategyData"
+  <el-table class="strategyTable no-scroll-vertical" ref="strategyTableRef" v-loading="strategyDataLoading" :data="strategyData"
-    :height="isReport ? 'auto' : '250px'" :highlight-current-row="true" stripe tooltip-effect="light" border
+    :height="(isReport || isLook) ? 'auto' : '250px'" :highlight-current-row="true" stripe tooltip-effect="light" border
    :span-method="arraySpanMethod">
    <el-table-column label="序号" width="56" align="center" fixed="left" :formatter="formatIndex" />
-    <el-table-column prop="action" label="行为类型" :width="isReport ? 'auto' : '150px'"
+    <el-table-column prop="action" label="行为类型" :width="isLook ? '106px' : (isReport ? 'auto' : '150px')"
      :min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #header>
        <span>行为类型</span>
@@ -31,7 +31,7 @@
        <span v-else>{{ scope.row['actionEnName'] || '--' }}</span>
      </template>
    </el-table-column>
-    <el-table-column prop="constraintName" label="约束条件" :width="isReport ? 'auto' : '150px'"
+    <el-table-column prop="constraintName" label="约束条件" :width="isLook ? '135px' : (isReport ? 'auto' : '150px')"
      :min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #header>
        <span>约束条件</span>
@@ -46,14 +46,14 @@
        <span v-else>{{ scope.row['constraintName'] || '--' }}</span>
      </template>
    </el-table-column>
-    <el-table-column prop="constraintEnName" label="约束条件英文名称" :width="isReport ? 'auto' : '150px'"
+    <el-table-column prop="constraintEnName" label="约束条件英文名称" :width="isReport ? 'auto' : '162px'"
      :min-width="isReport ? '120px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #default="scope">
        <el-input v-if="!isLook" v-model="scope.row['constraintEnName']" :disabled="true" placeholder="-"></el-input>
        <span v-else>{{ scope.row['constraintEnName'] || '--' }}</span>
      </template>
    </el-table-column>
-    <el-table-column prop="constraintOperatorCode" label="运算符" :width="isReport ? 'auto' : '150px'"
+    <el-table-column prop="constraintOperatorCode" label="运算符" :width="isLook ? '118px' : (isReport ? 'auto' : '150px')"
      :min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #header>
        <span>运算符</span>
@@ -68,8 +68,8 @@
        <span v-else>{{ scope.row['constraintOperatorName'] || '--' }}</span>
      </template>
    </el-table-column>
-    <el-table-column prop="constraintValue" label="约束值" :width="isReport ? 'auto' : '340px'"
+    <el-table-column prop="constraintValue" label="约束值" :width="(isReport || isLook) ? 'auto' : '300px'"
-      :min-width="isReport ? '160px' : undefined" align="left" :show-overflow-tooltip="!isReport">
+      :min-width="(isReport || isLook) ? '160px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #header>
        <span>约束值</span>
        <!-- <span style="color:red;margin-left: 2px;">*</span> -->
--- a/src/views/data_smart_contract/contractRecordManage.vue
View file @f6416c1
+++ b/src/views/data_smart_contract/contractRecordManage.vue
View file @f6416c1
@@ -65,7 +65,7 @@ const tableFields = ref([
  { label: "产品名称", field: "productName", width: 180 },
  { label: "合约编号", field: "contractId", width: 355 },
  { label: "合约状态", field: "contractStatus", type: "tag", width: 96, align: 'center' },
-  { label: "发起主体", field: "tenantName", width: 205 },
+  { label: "发起主体", field: "tenantName", width: 200 },
  { label: "签署时间", field: "signatureTime", width: 170 }
 ]);
--- a/src/views/data_smart_contract/smartContractDetail.vue
View file @f6416c1
+++ b/src/views/data_smart_contract/smartContractDetail.vue
View file @f6416c1
@@ -252,7 +252,10 @@ const btnHandles = ref({
 const extendTableInfo = ref({
  id: "input-extend-table",
-  height: '214px',
+  height: 'auto',
+  class: 'no-scroll-vertical',
+  minPanelHeight: '60px',
+  minHeight: '60px',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "扩展字段名称", field: "expansionFieldName", width: 160 },
@@ -290,12 +293,12 @@ const exportExtendTableInfo = computed(() => {
 const productTableInfo = ref({
  id: "input-product-table",
-  height: '75px',
+  height: 'auto',
  minHeight: '60px',
  minPanelHeight: '60px',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
-    { label: "数据产品", field: "dataProductName", width: 180 },
+    { label: "数据产品", field: "dataProductName", width: 270 },
    { label: "数据产品编码", field: "dataProductId", width: 261 },
    { label: "所属主体名称", field: "dataProductEntityName", width: 240 },
    { label: "产品简介", field: "dataProductAbstract", width: 240 },
@@ -582,37 +585,36 @@ const signFileLoading = ref(false);
 const signFileUrlInfo: any = ref({ name: '', url: '' });
-function getElementPdfPosition(element, options = {}) {
+// function getElementPdfPosition(element, options = {}) {
-  const { scale = 2, pageHeightPt = 842 } = options;
+//   const { scale = 2, pageHeightPt = 842 } = options;
-  // 1. 获取元素距离容器顶部的像素距离
+//   // 1. 获取元素距离容器顶部的像素距离
-  const container = document.getElementById('pdf-container'); // 你的根容器
+//   const container = document.getElementById('pdf-container'); // 你的根容器
-  const rect = element.getBoundingClientRect();
+//   const rect = element.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
+//   const containerRect = container.getBoundingClientRect();
-  const topPx = rect.top - containerRect.top + window.scrollY;
+//   const topPx = rect.top - containerRect.top + window.scrollY;
-  // 2. html2canvas 默认使用 devicePixelRatio，但 html2pdf 通常固定 scale
+//   // 2. html2canvas 默认使用 devicePixelRatio，但 html2pdf 通常固定 scale
-  // html2pdf 内部会将 canvas 高度按比例缩放到 PDF 页面宽度
+//   // html2pdf 内部会将 canvas 高度按比例缩放到 PDF 页面宽度
-  // 简化模型：假设 PDF 宽度 = 595pt (A4)，对应 canvas.width / scale px
+//   // 简化模型：假设 PDF 宽度 = 595pt (A4)，对应 canvas.width / scale px
-  const pdfPageWidthPt = 595; // A4 width in pt
+//   const pdfPageWidthPt = 595; // A4 width in pt
-  const containerWidthPx = container.offsetWidth;
+//   const containerWidthPx = container.offsetWidth;
-  const pxToPtRatio = pdfPageWidthPt / containerWidthPx; // 每像素多少 pt
+//   const pxToPtRatio = pdfPageWidthPt / containerWidthPx; // 每像素多少 pt
-  const topPt = topPx * pxToPtRatio;
-  // 3. 计算落在第几页 & 页内 Y 坐标
+//   const topPt = topPx * pxToPtRatio;
-  const page = Math.floor(topPt / pageHeightPt) + 1;
-  const yInPage = topPt % pageHeightPt;
-  return {
+//   // 3. 计算落在第几页 & 页内 Y 坐标
-    page,
+//   const page = Math.floor(topPt / pageHeightPt) + 1;
-    x: rect.left * pxToPtRatio, // 可选 X 坐标
+//   const yInPage = topPt % pageHeightPt;
-    y: yInPage,
-    totalY: topPt
-  };
-}
+//   return {
+//     page,
+//     x: rect.left * pxToPtRatio, // 可选 X 坐标
+//     y: yInPage,
+//     totalY: topPt
+//   };
+// }
 const geneSignFile = async () => {
  const element = document.getElementById('pdf-content'); // 指定要转PDF的DOM
@@ -1437,7 +1439,7 @@ onActivated(() => {
            <el-table-column type="expand">
              <template #default="scope">
                <div class="h-title mt6">履约证明</div>
-                <div class="list_panel" style="width: 1000px;">
+                <div class="list_panel" style="width: 1200px;">
                  <div class="list_item">
                    <span class="item_label">日志摘要:</span>
                    <span class="item_value"><ellipsis-tooltip :content="scope.row?.contractProof?.logHash || '--'"
@@ -1451,16 +1453,16 @@ onActivated(() => {
                    </span>
                  </div>
                  <div class="list_item">
-                    <span class="item_label">发送时间:</span>
+                    <span class="item_label">区块链时间:</span>
                    <span class="item_value"><ellipsis-tooltip :content="scope.row?.contractProof?.sendTime || '--'"
                        class-name="w100f mr8-i" :refName="'tooltipOver' + 'sendTime'"></ellipsis-tooltip></span>
                  </div>
                  <div class="list_item" style="width: 50%;">
-                    <span class="item_label">履约连接器签名:</span>
+                    <span class="item_label">履约连接器名称:</span>
                    <!-- <template v-if="scope.row?.signature?.url">
                <showFile :file="[execProofDetailInfo.signature]"></showFile>
              </template> -->
-                    <span class="item_value">{{ scope.row?.contractProof?.signature || '--' }}</span>
+                    <span class="item_value">{{ scope.row?.contractProof?.connectName || '--' }}</span>
                  </div>
                </div>
              </template>
@@ -1566,7 +1568,7 @@ onActivated(() => {
    <Dialog ref="dialogRef" :dialogInfo="detailDialogInfo" class="policy-table-detail"
      @btnClick="handleVersionDialogBtnClick">
      <template #extra-content>
-        <div v-loading="detailDialogInfo.contentLoading">
+        <div v-loading="detailDialogInfo.contentLoading" style="max-height: 600px;overflow-y: auto;">
          <StrategyTable ref="strategyTableDetailRef" :show-title="true" :is-look="true" :value="versionDetail">
          </StrategyTable>
        </div>
--- a/src/views/data_smart_contract/smartContractManagement.vue
View file @f6416c1
+++ b/src/views/data_smart_contract/smartContractManagement.vue
View file @f6416c1
@@ -54,7 +54,7 @@ const tableFields = ref([
  { label: "签署方式", field: "signModeName", width: 120 },
  { label: "合约状态", field: "contractStatus", type: "tag", width: 96, align: 'center' },
  { label: "合约编号", field: "contractId", width: 355 },
-  { label: "发起主体", field: "tenantName", width: 205 },
+  { label: "发起主体", field: "tenantName", width: 200 },
  { label: "创建人", field: "createUserName", width: 130 },
  { label: "创建时间", field: "createTime", width: 170 },
  { label: "提交企业", field: "submitTenantName", width: 200 },