Merge remote-tracking branch 'origin/dev_2307' into dev_2307

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

@@ -87,9 +87,16 @@
         <template slot="htmlSlot" slot-scope="text">
           <div v-html="text"></div>
         </template>
+        <!-- <template slot="imgSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;" />
+        </template> -->
         <template slot="imgSlot" slot-scope="text">
           <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
+          <img v-else :src="getImgView(text)" height="25px" @click="handlePictureCardPreview(getImgView(text))" style="max-width:80px;font-size: 12px;font-style: italic;" />
+          <a-modal :visible.sync="dialogVisible" :footer="null" @cancel="handleCancel" :mask="false" >
+            <img width="100%" :src="dialogImageUrl" >
+          </a-modal>
         </template>
         <template slot="fileSlot" slot-scope="text">
           <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
@@ -156,6 +163,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';
+import { Modal } from 'ant-design-vue';
 export default {
   name: 'RequirementItemList',
   mixins: [JeecgListMixin, mixinDevice],
@@ -164,6 +172,9 @@ export default {
   },
   data() {
     return {
+      // 列表图片略缩图放大
+      dialogImageUrl: '',
+      dialogVisible: false,
       description: '需求管理管理页面',
       // 表头
       columns: [
@@ -205,7 +216,7 @@ export default {
           dataIndex: 'requirementCode',
           customRender: (text) => {
             if (text) {
-              const truncatedText = text.length > 10 ? text.substring(0, 10) : text;
+              const truncatedText = text.length > 10 ? text.substring(0, 10) + '...' : text;
               return (
                 <Tooltip title={text}>
                   <span>{truncatedText}</span>
@@ -256,6 +267,7 @@ export default {
                       <span>{strippedText.slice(0, 20)}</span>
                       <br />
                       <span>{strippedText.slice(20, 40)}</span>
+                      {strippedText.length > 40 && '...'}
                     </div>
                   </Tooltip>
                 );
@@ -279,7 +291,7 @@ export default {
           title: '图片',
           align: "center",
           dataIndex: 'requirementPic',
-          scopedSlots: {customRender: 'imgSlot'}
+          scopedSlots: { customRender: 'imgSlot' }
         },
         {
           title: '文件',
@@ -337,6 +349,16 @@ export default {
     },
   },
   methods: {
+    // 列表略缩图的大屏预览
+    handlePictureCardPreview(text) {
+      this.dialogImageUrl = text
+      console.log('s', text)
+      this.dialogVisible = true;
+    },
+    // 关闭弹窗的大屏预览
+    handleCancel() {
+      this.dialogVisible = false;
+    },
     // 定义换行在列表里超过10个字符自动换行，超过20个字符，列表里依旧显示换过行的字符在第二行多余的字符省略，鼠标移动可以浮现完整内容
     renderTextColumn(text) {
       if (text) {
@@ -465,4 +487,5 @@ export default {
 .button-group a {
   margin-right: 8px;
   white-space: nowrap;
-}</style>
+}
+</style>