需求列表

ant-design-vue-jeecg/src/views/requirementitem/RequirementItemList.vue

@@ -11,7 +11,8 @@
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="类型">
-              <j-dict-select-tag placeholder="请选择类型" v-model="queryParam.typeId" dictCode="requirement_type,type_name,id"/>
+              <j-dict-select-tag placeholder="请选择类型" v-model="queryParam.typeId"
+                dictCode="requirement_type,type_name,id" />
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -26,12 +27,14 @@
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="需求等级">
-                <j-dict-select-tag placeholder="请选择需求等级" v-model="queryParam.requirementLevel" dictCode="requirement_level"></j-dict-select-tag>
+              <j-dict-select-tag placeholder="请选择需求等级" v-model="queryParam.requirementLevel"
+                dictCode="requirement_level"></j-dict-select-tag>
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="需求状态">
-                <j-dict-select-tag placeholder="请选择需求状态" v-model="queryParam.requirementStatus" dictCode="requirement_status"></j-dict-select-tag>
+              <j-dict-select-tag placeholder="请选择需求状态" v-model="queryParam.requirementStatus"
+                dictCode="requirement_status"></j-dict-select-tag>
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -49,33 +52,27 @@
     <div class="table-operator">
       <a-button @click="handleAddxqlx(1, '')" type="primary" icon="plus">新增</a-button>
       <a-button type="primary" icon="download" @click="handleExportXls('需求管理')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
+        @change="handleImportExcel">
         <a-button type="primary" icon="import">导入</a-button>
       </a-upload>
       <a-button @click="wdxq()" type="primary" icon="search">我的需求</a-button>
       <!-- 高级查询区域 -->
-      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+      <j-super-query :fieldList="superFieldList" ref="superQueryModal"
+        @handleSuperQuery="handleSuperQuery"></j-super-query>
     </div>
 
     <!-- table区域-begin -->
     <div>
       <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
+          selectedRowKeys.length }}</a>项
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
 
-      <a-table
+      <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
-        ref="table"
+        :dataSource="dataSource" :pagination="ipagination" :loading="loading"
-        size="middle"
+        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
-        :scroll="{x:true}"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        class="j-table-force-nowrap"
         @change="handleTableChange">
         <span slot="zh" slot-scope="text, record" v-if="record.xqflag === '1'">
           <a @click="zhmk(record)">模块</a>
@@ -96,18 +93,12 @@
         </template>
         <template slot="fileSlot" slot-scope="text">
           <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-          <a-button
+          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
-            v-else
-            :ghost="true"
-            type="primary"
-            icon="download"
-            size="small"
-            @click="downloadFile(text)">
             下载
           </a-button>
         </template>
 
-        <span slot="action" slot-scope="text, record">
+        <!-- <span slot="action" slot-scope="text, record">
           <a @click="checkqx(record)">编辑</a>
 
           <a-divider type="vertical" />
@@ -122,8 +113,25 @@
           <a @click="cqdx(record)">抽取对象</a>
           <a-divider type="vertical" />
           <a v-if="record.xqflag === '1'" @click="qrxq(record.id)">确认需求</a>
+        </span> -->
+        <span slot="action" slot-scope="text, record" class="action-buttons">
+          <div>
+            <a @click="checkqx(record)">编辑</a>
+            <a-divider type="vertical" />
+            <a @click="handleDetail(record)">详情</a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteQx(record)">
+              <a>删除</a>
+            </a-popconfirm>
+          </div>
+          <div>
+            <a @click="handleAddxqlx(0, record)">拆分</a>
+            <a-divider type="vertical" />
+            <a @click="cqdx(record)">抽取对象</a>
+            <a-divider type="vertical" />
+            <a v-if="record.xqflag === '1'" @click="qrxq(record.id)">确认需求</a>
+          </div>
         </span>
-
       </a-table>
     </div>
 
@@ -147,7 +155,7 @@
 import FunctionxModal1 from "../functionx/modules/FunctionxModal1";
 import RulexModal1 from "../rulex/modules/RulexModal1";
 import RequirementEntityList1 from "../requiremententity/RequirementEntityList1";
-
+import { Tooltip, Typography } from 'ant-design-vue';
 export default {
   name: 'RequirementItemList',
   mixins: [JeecgListMixin, mixinDevice],
@@ -172,7 +180,8 @@
         {
           title: '项目',
           align: "center",
-            dataIndex: 'projectId_dictText'
+          dataIndex: 'projectId_dictText',
+          customRender: this.renderTextColumn
         },
         {
           title: '类型',
@@ -182,17 +191,36 @@
         {
           title: '上级需求',
           align: "center",
-            dataIndex: 'upperId_dictText'
+          dataIndex: 'upperId_dictText',
+          customRender: this.renderTextColumn
         },
+        // {
+        //   title:'需求编码',
+        //   align:"center",
+        //   dataIndex: 'requirementCode'
+        // },
         {
           title: '需求编码',
-            align:"center",
+          align: 'center',
-            dataIndex: 'requirementCode'
+          dataIndex: 'requirementCode',
+          customRender: (text) => {
+            if (text) {
+              const truncatedText = text.length > 10 ? text.substring(0, 10) : text;
+              return (
+                <Tooltip title={text}>
+                  <span>{truncatedText}</span>
+                </Tooltip>
+              );
+            } else {
+              return null;
+            }
+          }
         },
         {
           title: '中文名称',
           align: "center",
-            dataIndex: 'requirementName'
+          dataIndex: 'requirementName',
+          customRender: this.renderTextColumn
         },
         {
           title: '需求等级',
@@ -204,21 +232,60 @@
           align: "center",
           dataIndex: 'requirementStatus_dictText'
         },
+        // {
+        //   title: '需求描述',
+        //   align: "center",
+        //   dataIndex: 'requirementDescribe',
+        //   scopedSlots: { customRender: 'htmlSlot' },
+        // },
         {
           title: '需求描述',
           align: "center",
           dataIndex: 'requirementDescribe',
-            scopedSlots: {customRender: 'htmlSlot'},
+          scopedSlots: {
+            customRender: 'htmlSlot'
+          },
+          customRender: (text) => {
+            if (text) {
+              // 去掉<p>标签
+              const strippedText = text.replace(/<p>/g, '').replace(/<\/p>/g, '')
+              if (strippedText.length > 40) {
+                return (
+                  <Tooltip title={strippedText}>
+                    <div class="ellipsis-text" style="text-align: left;">
+                      <span>{strippedText.slice(0, 20)}</span>
+                      <br />
+                      <span>{strippedText.slice(20, 40)}</span>
+                    </div>
+                  </Tooltip>
+                );
+              } else if (strippedText.length > 20) {
+                return (
+                  <div style="text-align: left;">
+                    <span>{strippedText.slice(0, 20)}</span>
+                    <br />
+                    <span>{strippedText.slice(20)}</span>
+                  </div>
+                );
+              } else {
+                return <span style="text-align: left;">{strippedText}</span>;
+              }
+            } else {
+              return null; // or any fallback value you prefer
+            }
+          }
         },
         {
-            title:'需求图片',
+          title: '图片',
           align: "center",
-            dataIndex: 'requirementPic'
+          dataIndex: 'requirementPic',
+          scopedSlots: {customRender: 'imgSlot'}
         },
         {
-            title:'需求文件',
+          title: '文件',
           align: "center",
-            dataIndex: 'requirementFile'
+          dataIndex: 'requirementFile',
+          scopedSlots: { customRender: 'fileSlot' }
         },
         {
           title: '创建人',
@@ -270,6 +337,34 @@
     },
   },
   methods: {
+    // 定义换行在列表里超过10个字符自动换行，超过20个字符，列表里依旧显示换过行的字符在第二行多余的字符省略，鼠标移动可以浮现完整内容
+    renderTextColumn(text) {
+      if (text) {
+        if (text.length > 20) {
+          return (
+            <Tooltip title={text}>
+              <div class="ellipsis-text" style="text-align: center;">
+                <span>{text.slice(0, 10)}</span>
+                <br />
+                <span>{text.slice(10, 20)}</span>
+              </div>
+            </Tooltip>
+          );
+        } else if (text.length > 10) {
+          return (
+            <div style="text-align: center;">
+              <span>{text.slice(0, 10)}</span>
+              <br />
+              <span>{text.slice(10)}</span>
+            </div>
+          );
+        } else {
+          return <span style="text-align: center;">{text}</span>;
+        }
+      } else {
+        return null; // or any fallback value you prefer
+      }
+    },
     zhmk(record) {
       getAction(this.url.checkzh, { requirementid: record.id, funlevel: 2 }).then((res) => {
         if (res.success) {
@@ -353,4 +448,21 @@
 </script>
 <style scoped>
 @import '~@assets/less/common.less';
-</style>
+
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+
+.button-group a {
+  margin-right: 8px;
+  white-space: nowrap;
+}</style>