vue2 antd 开关和首页门户样式，表格合计

已于 2024-07-11 15:31:27 修改
阅读量248 收藏 3
点赞数 6
文章标签： 前端 javascript html
于 2024-06-25 11:04:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42348009/article/details/139952233
版权

1.首页门户样式

如图

1.关于圆圈颜色随机设置

  <a-col :span="6" v-for="(item, index) in menuList" :key="index">
                <div
                  class="circle"
                  :style="{ borderColor: randomBorderColor() }"
                  @click="toMeRouter(item)"
                >
                  <span>{{ item.menuName }}</span>
                </div>
              </a-col>
 //随机一个边框颜色
    randomBorderColor() {
      const randomColor = () => Math.floor(Math.random() * 256).toString(16);
      return "#" + randomColor() + randomColor() + randomColor();
    },

2.关于规章制度长度和省略号总结

 <div class="rule">
            <div v-if="rulers.length > 0">
              <table style="width: 100%">
                <tbody>
                  <tr v-for="(item, index) in rulers" :key="index">
                    <td @click="detail(item)">
                      <div class="content">
                        <div class="desContent">
                          <span
                            :class="{
                              hiddenOverflow: isIncidentDescribeLong(item.detail),
                            }"
                            ><a-tag color="pink" v-if="index == 0">更新</a-tag> {{ extractTextFromHTML(item.detail) }}</span
                          >
                        </div>
                        <div class="time">{{ formattedUpdateTime(item) }}</div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div v-else style="text-align: center">暂无数据</div>
          </div>

判断是否满足隐藏条件 

   isIncidentDescribeLong(data) {
      if (!data) return;
      return data.length > 45;
    },

隐藏的样式

.hiddenOverflow {
  font-size: 14px;
  text-indent: 2em;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; /* 限制显示3行 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
}

父级盒子 

重点p不是自己生成的 可以：：v-deep   找了非常久 不知道怎么处理语法

.desContent {
  display: inline-block;
  width: 360px;
  font-size: 14px;

  ::v-deep p {
    //p不是自己生成的
    margin-bottom: 0px !important;
  }
  &:hover {
    text-decoration: underline;
  }
}

还有一个就是希望每层都有距离

td {
  padding-bottom: 15px;
  cursor: pointer;
}

还有一个非常重要 就是我这个功能是通过接口的当我复制黏贴的时候 会有p标签和span标签 v-html不能去除这些标准的标签

extractTextFromHTML(html) {
      //JavaScript的DOM解析功能
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, "text/html");
      return doc.body.textContent || "";
    },

3.关于表格合计

如图

 表头

   columns: [
        {
          title: "序号",
          align: "center",
          width: 70,
          customRender: (text, record, index) => {
            if (record.isTotalRow) {
              return {
                children: "合计",
                attrs: { colSpan: 6 },
              };
            }
            return index + 1;
          },
          width: 70,
          align: "center",
        },
        {
          title: "企业名称（租赁合同中的甲方）",
          align: "center",
          dataIndex: "companyName",
          width: 150,
          customRender: (text, record) => {
            if (record.isTotalRow) {
              return {
                children: null,
                attrs: { colSpan: 0 },
              };
            }
            return text;
          },
        },
        {
          title: "资产名称",
          align: "center",
          dataIndex: "assetName",
          width: 150,
          customRender: (text, record) => {
            if (record.isTotalRow) {
              return {
                children: null,
                attrs: { colSpan: 0 },
              };
            }
            return text;
          },
        },
        {
          title: "详细地址",
          align: "center",
          dataIndex: "address",
          width: 150,
          customRender: (text, record) => {
            if (record.isTotalRow) {
              return {
                children: null,
                attrs: { colSpan: 0 },
              };
            }
            return text;
          },
        },
        {
          title: "产权所属单位（产权人）",
          align: "center",
          dataIndex: "propertyOrgName",
          width: 150,
          customRender: (text, record) => {
            if (record.isTotalRow) {
              return {
                children: null,
                attrs: { colSpan: 0 },
              };
            }
            return text;
          },
        },
        {
          title: "资产类型",
          align: "center",
          dataIndex: "assetType",
          width: 150,
          customRender: (text, record) => {
            if (record.isTotalRow) {
              return {
                children: null,
                attrs: { colSpan: 0 },
              };
            }

            switch (Number.parseInt(text)) {
              case 1:
                return "房屋";
              case 2:
                return "土地";
              case 3:
                return "场地";
              case 4:
                return "设备";
            }
          },
        },
        {
          title: "租赁面积（m²）",
          align: "center",
          dataIndex: "rentAreas",
          width: 150,
        },
        {
          title: "承租方（租赁合同中的乙方）",
          align: "center",
          dataIndex: "receiveOrgName",
          width: 150,
        },
        {
          title: "租赁用途",
          align: "center",
          dataIndex: "rentUse",
          width: 150,
        },
        {
          title: "最终行为批准单位",
          align: "center",
          dataIndex: "finalOrgName",
          width: 150,
          customRender: (text) => {
            switch (Number.parseInt(text)) {
              case 1:
                return "市政府";
              case 2:
                return "左海集团";
              case 3:
                return "二级企业";
            }
          },
        },
        {
          title: "招租方式",
          align: "center",
          dataIndex: "rentWay",
          width: 150,
          customRender: (text) => {
            switch (Number.parseInt(text)) {
              case 1:
                return "平台竞租";
              case 2:
                return "协议租赁";
              case 3:
                return "自主招租";
            }
          },
        },
        {
          title: "招租结果是否进入平台公示",
          align: "center",
          dataIndex: "noticeFlag",
          width: 150,

          customRender: (text) => {
            if (text == "1") {
              return "是";
            } else {
              return "否";
            }
          },
        },
        {
          title: "租赁合同起止时间（X年x月x日-x年x月x日）",
          align: "center",
          dataIndex: "rentStartEndDate",
          width: 150,
        },
        {
          title: "租赁期数（月）",
          align: "center",
          dataIndex: "rentMonths",
          width: 150,
        },
        {
          title: "免租期（月）",
          align: "center",
          dataIndex: "rentFreeMonths",
          width: 150,
        },
        {
          title: "租金底价（元/月·m²）",
          align: "center",
          dataIndex: "rentMinPrice",
          width: 150,
        },
        {
          title: "租金成交价（元/月·m²）",
          align: "center",
          dataIndex: "rentDealPrice",
          width: 150,
        },
        {
          title: "租金递增率",
          align: "center",
          dataIndex: "rentIncreasePercent",
          width: 150,
        },
        {
          title: "合同总金额（万元）",
          align: "center",
          dataIndex: "allContractMoney",
          width: 150,
        },
        {
          title: "月租金（万元）",
          align: "center",
          dataIndex: "monthRentMoney",
          width: 150,
        },
        {
          title: "本年应收租金（万元）",
          align: "center",
          dataIndex: "yearRentShouldMoney",
          width: 150,
        },
        {
          title: "本年实收租金（万元）",
          align: "center",
          dataIndex: "yearRentRealMoney",
          width: 150,
        },
        {
          title: "是否欠租",
          align: "center",
          dataIndex: "arrearsFlag",
          width: 150,
          customRender: (text) => {
            if (text == "1") {
              return "是";
            } else {
              return "否";
            }
          },
        },
        {
          title: "其他违约情况",
          align: "center",
          dataIndex: "otherDefault",
          width: 150,
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark",
          width: 150,
        },
      ],

最后一行的数据可以这样添加

    assetRentDetailAllCount() {
      this.loading = true;
      const meta = { companyName: this.queryParam.companyName };
      // console.log("this.queryParam", this.queryParam);
      assetRentDetailAllCount(meta)
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            console.log("res", res);
            this.dataSource = res.data.list;
            // console.log(" this.dataSource", this.dataSource);
            // 使用解构赋值简化对象创建过程
            const totalRow = {
              isTotalRow: true,
              rentAreas: res.data.rentAreas,
              receiveOrgName: res.data.receiveOrgName,
              rentUse: res.data.rentUse,
              finalOrgName: res.data.finalOrgName,
              rentWay: res.data.rentWay,
              noticeFlag: res.data.noticeFlag,
              rentStartEndDate: res.data.rentStartEndDate,
              rentMonths: res.data.rentMonths,
              rentFreeMonths: res.data.rentFreeMonths,
              rentMinPrice: res.data.rentMinPrice,
              rentDealPrice: res.data.rentDealPrice,
              rentIncreasePercent: res.data.rentIncreasePercent,
              allContractMoney: res.data.allContractMoney.toFixed(2),
              monthRentMoney: res.data.monthRentMoney,
              yearRentShouldMoney: res.data.yearRentShouldMoney.toFixed(2),
              yearRentRealMoney: res.data.yearRentRealMoney,
              arrearsFlag: res.data.arrearsFlag,
              otherDefault: res.data.otherDefault,
              remark: res.data.remark,
            };

            this.dataSource.push(totalRow);
            // console.log(" this.dataSource22", this.dataSource);
          }
        })
        .catch((error) => {
          this.loading = false;
          console.error("Error fetching data:", error);
        });
    },

4.关于文件下载表格  后端不提供模板 首行缩进是Indent,合计也在下方

npm i docx
npm i file-saver
import {
  Document,
  Packer,
  Paragraph,
  TextRun,
  Table,
  TableRow,
  TableCell,
  WidthType,
  AlignmentType,
  HeadingLevel,
  Indent,
} from "docx";
import { saveAs } from "file-saver";
 <a-button
        type="primary"
        @click="generateDocx"
        :disabled="this.selectionRows.length > 0 ? false : true"
        >下载缴费单</a-button
      >
  generateDocx() {
      let totalShouldPayMoney = this.dataSource2.reduce(
        (sum, item) => sum + (item.shouludPayMoney || 0),
        0
      );
      const doc = new Document({
        sections: [
          {
            children: [
              new Paragraph({
                children: [
                  new TextRun({
                    text: "缴费通知单",
                    heading: HeadingLevel.TITLE,
                    bold: true,
                    size: 32,
                  }),
                ],
                alignment: AlignmentType.CENTER,
              }),
              new Paragraph({
                children: [
                  new TextRun({
                    text: `尊敬的承租户：${this.downform.lesseeOrg}`,
                    heading: HeadingLevel.HEADING_1,
                    bold: true,
                    size: 24,
                  }),
                ],
              }),
              new Paragraph({
                children: [
                  new TextRun({
                    text: `本公司特函通知，以下是${this.downform.startDate}至${this.downform.endDate} 费用使用详单。您租赁的项目按合同约定应缴纳以下费用，敬请贵司在收到本通知书单日内将下述款项以银行转账进行缴纳。`,
                    size: 18,
                  }),
                ],
                indent: { firstLine: 480 }, // 设置首行缩进
              }),

              new Table({
                rows: [
                  new TableRow({
                    children: [
                      new TableCell({
                        children: [new Paragraph("资产编号")],
                        width: { size: 10, type: WidthType.PERCENTAGE },
                        alignment: AlignmentType.CENTER,
                        verticalAlign: AlignmentType.CENTER,
                      }),
                      new TableCell({
                        children: [new Paragraph("资产名称")],
                        width: { size: 10, type: WidthType.PERCENTAGE },
                        alignment: AlignmentType.CENTER,
                        verticalAlign: AlignmentType.CENTER,
                      }),
                      new TableCell({
                        children: [new Paragraph("单月租金（元）")],
                        width: { size: 10, type: WidthType.PERCENTAGE },
                        alignment: AlignmentType.CENTER,
                        verticalAlign: AlignmentType.CENTER,
                      }),
                      new TableCell({
                        children: [new Paragraph("数量")],
                        width: { size: 10, type: WidthType.PERCENTAGE },
                        alignment: AlignmentType.CENTER,
                        verticalAlign: AlignmentType.CENTER,
                      }),
                      new TableCell({
                        children: [new Paragraph("应付金额")],
                        width: { size: 10, type: WidthType.PERCENTAGE },
                        alignment: AlignmentType.CENTER,
                        verticalAlign: AlignmentType.CENTER,
                      }),
                    ],
                  }),
                  ...this.dataSource2.map(
                    (item) =>
                      new TableRow({
                        children: [
                          new TableCell({
                            children: [new Paragraph(item.code || "")],
                            alignment: AlignmentType.CENTER,
                            verticalAlign: AlignmentType.CENTER,
                          }),
                          new TableCell({
                            children: [new Paragraph(item.name || "")],
                            alignment: AlignmentType.CENTER,
                            verticalAlign: AlignmentType.CENTER,
                          }),
                          new TableCell({
                            children: [
                              new Paragraph(
                                item.monthRentMoney.toString() || ""
                              ),
                            ],
                            alignment: AlignmentType.CENTER,
                            verticalAlign: AlignmentType.CENTER,
                          }),
                          new TableCell({
                            children: [
                              new Paragraph(item.monthNum.toString() || ""),
                            ],
                            alignment: AlignmentType.CENTER,
                            verticalAlign: AlignmentType.CENTER,
                          }),
                          new TableCell({
                            children: [
                              new Paragraph(
                                item.shouludPayMoney.toString() || ""
                              ),
                            ],
                            alignment: AlignmentType.CENTER,
                            verticalAlign: AlignmentType.CENTER,
                          }),
                        ],
                      })
                  ),
                  // 添加合计行
                  new TableRow({
                    children: [
                      new TableCell({
                        children: [new Paragraph("合计")],
                        columnSpan: 4, // 合并前四列
                        alignment: AlignmentType.CENTER,
                        verticalAlign: AlignmentType.CENTER,
                      }),
                      new TableCell({
                        children: [
                          new Paragraph(totalShouldPayMoney.toFixed(2)),
                        ],
                        alignment: AlignmentType.CENTER,
                        verticalAlign: AlignmentType.CENTER,
                        shading: {
                          color: "#EFEFEF",
                          val: "clear",
                        },
                        borders: {
                          bottom: { style: "single", size: 12 },
                        },
                      }),
                    ],
                  }),
                ],
              }),
              new Paragraph({
                children: [
                  new TextRun({
                    text: `出租方：${this.downform.rentOrgName}`,
                    size: 18,
                  }),
                ],
                alignment: AlignmentType.RIGHT,
              }),
              new Paragraph({
                children: [
                  new TextRun({
                    text: `${this.date}`,
                    size: 18,
                  }),
                ],
                alignment: AlignmentType.RIGHT,
              }),
            ],
          },
        ],
      });
      Packer.toBlob(doc).then((blob) => {
        saveAs(blob, "缴费单详情.docx");
      });
    },

Paragraph (docx.js.org)

docx

docx

5.关于antd开关

 <a-table
        bordered
        ref="tableSelect"
        size="default"
        rowKey="id"
        :columns="columns2"
        :data-source="dataSource"
      >
        <!-- <div slot="assetCode" slot-scope="text, record">
          <a-input
            v-model="formData.assetCode"
            :disabled="formData.assetCode == dataform.assetCode"
          />
        </div> -->
        <div slot="isRequired" slot-scope="text, record, index">
          <a-switch
            @change="(checked) => onChangeSwitch(checked, record)"
            :checked="typeArr(dataSource[index].isRequired)"
          />
        </div>

        <span slot="action" slot-scope="text, record">
          <a @click="deleteRecord(record)">删除</a>
        </span>
      </a-table>
 onChangeSwitch(e, record) {
      // console.log("this.dataSource", this.dataSource);
      const updatedDataSource = this.dataSource.map((item, num) => {
        if (record.id == item.id) {
          if (e) {
            item.isRequired = "1";
          } else {
            item.isRequired = "0";
          }
        }
        return { ...item };
      });
      this.dataSource = updatedDataSource;

      console.log("this.dataSource", this.dataSource);
    },
 typeArr(val) {
      switch (Number.parseInt(val)) {
        case 0:
          return false;
        case 1:
          return true;
        default:
          return false;
      }
    },

6.关于表头  有的时候需要有这个属性 有的时候不需要

 const columsarr = JSON.parse(JSON.stringify(this.columns));

          if (this.assetType !== "4") {
            this.columns2 = columsarr.filter(
              (column) => column.dataIndex !== "number"
            );
            return this.columns2;
          } else {
            this.columns2 = this.columns;
          }
        }

7.表格最大值

  <a-table bordered ref="tableSelect" size="default" rowKey="id" :columns="columns" :data-source="dataSource">
                    <div slot="assetRentAreas" slot-scope="text, record, index">
                      <a-input-number v-model="dataSource[index].assetRentAreas" :max="dataSource[index].areas" :min="0" @change="changedataSource" />
                    </div>
                    <div slot="singlePrice" slot-scope="text, record, index">
                      <a-input-number v-model="dataSource[index].singlePrice" :min="0" @change="changedataSource" />
                    </div>
                    <span slot="action" slot-scope="text, record, index">
                      <a @click="deleteRecord(record, index)" style="color: red">删除</a>
                    </span></a-table
                  >
                </div>

重点是这个写法

:max="dataSource[index].areas"

_斯洛伐克
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值