装备资源库修改照片墙组件

src/MAR/assetsStore/detail/imgManage.vue

@@ -1,102 +0,0 @@
-<template>
-  <div>
-    <div style="margin-bottom: 10px" class="inline-16">
-      <Add class="inline-16" :rowData="props.rowData" @back="$refs.table.listData()" v-if="props.rowData && rowData.status == '新建' && utils.hasPermission('fileManage')"></Add>
-    </div>
-    <normalTable :sequence="true" v-if="props.rowData.type == 1" @listData="handleData" rowKey="sys_attachment_linksid" sequenceKey="linksid" :is-select="false" ref="table" size="small" :columns="utils.TBLayout('imgManageTable')" :param="param">
-      <template #tb_cell="{data}">
-        <template v-if="data.column.dataIndex === 'attinfos'">
-          <a-image v-if="props.rowData.type == 1 && data.record.attinfos.length" :src="data.record.attinfos[0].url" style="width:100px;height: 100px;"></a-image>
-          <video :src="data.record.attinfos[0].cover" :preview="{src:data.record.attinfos[0].url}" controls v-else-if="data.record.attinfos.length" style="width:100px;height: 100px;"></video>
-        </template>
-        <template v-else-if="data.column.dataIndex == 'operation'">
-          <Edit class="inline-16" @onSuccess="$refs.table.listData()" :rowData="data.record" :detail="props.rowData" v-if="utils.hasPermission('fileManage') && rowData.status == '新建'"></Edit>
-          <customBtn
-            btnName="删除"
-            idName="20240407135902"
-            keyName="linksids"
-            :id="[data.record.linksid]"
-            type="link"
-            message="确定删除当前资源吗?"
-            @onSuccess="$refs.table.listData()"
-            size="middle"
-            v-if="utils.hasPermission('fileManage') && rowData.status == '新建'"
-          />
-        </template>
-      </template>
-    </normalTable>
-    <normalTable :sequence="true" v-else @listData="handleData" rowKey="sys_attachment_linksid" sequenceKey="linksid" :is-select="false" ref="table" size="small" :columns="utils.TBLayout('imgManageTable1')" :param="param">
-      <template #tb_cell="{data}">
-        <template v-if="data.column.dataIndex === 'attinfos'">
-          <a-image v-if="props.rowData.type == 1 && data.record.attinfos.length" :src="data.record.attinfos[0].cover" :preview="{src:data.record.attinfos[0].url}" width="100px" height="100px"></a-image>
-          <video :src="data.record.attinfos[0].url" controls v-else-if="data.record.attinfos.length" style="width:100px;height: 100px"></video>
-        </template>
-        <template v-else-if="data.column.dataIndex == 'operation'">
-          <!-- <Edit class="inline-16"  @onSuccess="$refs.table.listData()" :rowData="data.record" :detail="props.rowData" v-if="utils.hasPermission('fileManage') && rowData.status == '新建'"></Edit> -->
-          <customBtn
-            btnName="删除"
-            idName="20240407135902"
-            keyName="linksids"
-            :id="[data.record.linksid]"
-            type="link"
-            message="确定删除当前资源吗?"
-            @onSuccess="$refs.table.listData()"
-            size="middle"
-            v-if="utils.hasPermission('fileManage') && rowData.status == '新建'"
-          />
-        </template>
-      </template>
-    </normalTable>
-  </div>
-</template>
-
-<script setup>
-import { EditOutlined } from '@ant-design/icons-vue';
-import normalTable from '@/template/MARnormalTable/index.vue'
-import Add from './Add.vue'
-import Edit from './Edit.vue'
-import {ref, defineProps, defineEmits,watch, nextTick} from 'vue'
-import Api from '@/api/api'
-import utils from '@/utils/utils'
-import { message, Modal } from 'ant-design-vue';
-import { useAuthStore } from '@/stores/modules/auth'
-import { useRouter } from "vue-router";
-import customBtn from '@/components/customHandleBtn/index.vue'
-import SelectModel from '@/components/selectModel/index2.vue'
-
-let props = defineProps(['rowData'])
-const router = useRouter()
-
-let param = ref({
-  "id": "20240407140002",
-  "content": {
-    "ownertable":'sat_sharematerial',
-    "ownerid": router.currentRoute.value.query.id,
-    "pageNumber": 1,
-    "pageSize": 20,
-    "where": {
-    }
-}
-})
-let table = ref()
-
-const search = () => {
-  table.value.listData()
-}
-
-const handleData = (data) => {
-  data.forEach(item => {
-    item.attinfos = utils.fileList(item.attinfos)
-    item.attinfos = item.attinfos.map(v => {
-      v.cover = utils.getSpecifiedImage(v,'compressed')
-      return v
-    })
-  })
-  console.log(data,'数据11');
-}
-
-</script>
-
-<style scoped>
-
-</style>

src/MAR/assetsStore/detail/index.vue

@@ -1,20 +1,27 @@
 <template>
   <div>
-    <detail-template 
-      :headData="mainAreaData" 
-      :title="mainData.title" 
-      :tabs="[`${mainData.type==1?'图片管理':'视频管理'}`,'详细信息']" 
+    <detail-template
+      :headData="mainAreaData"
+      :title="mainData.title"
+      :tabs="[`${mainData.type == 1 ? '图片管理' : '视频管理'}`, '详细信息']"
       ownertable="sat_sharematerial"
-      :disable="utils.isDisabled(mainData.status,['发布'])"
-      :delParam="{id:20240319104002,content:{sat_sharematerialids:[router.currentRoute.value.query.id]}}"
-      >
+      :disable="utils.isDisabled(mainData.status, ['发布'])"
+      :delParam="{
+        id: 20240319104002,
+        content: { sat_sharematerialids: [router.currentRoute.value.query.id] },
+      }"
+    >
       <template #operation>
-        <Edit @back="mianData()" v-if="utils.hasPermission('update') && mainData.status != '发布'" :rowData="mainData"></Edit>
+        <Edit
+          @back="mianData()"
+          v-if="utils.hasPermission('update') && mainData.status != '发布'"
+          :rowData="mainData"
+        ></Edit>
         <customBtn
           btnName="发布"
           idName="20240329131702"
           keyName="sat_sharematerialids"
-          :paramData="[{key:'status',value:1}]"
+          :paramData="[{ key: 'status', value: 1 }]"
           :id="[router.currentRoute.value.query.id]"
           type="primary"
           message="确定发布当前资源吗?"
@@ -26,7 +33,7 @@
           btnName="取消发布"
           idName="20240329131702"
           keyName="sat_sharematerialids"
-          :paramData="[{key:'status',value:0}]"
+          :paramData="[{ key: 'status', value: 0 }]"
           :id="[router.currentRoute.value.query.id]"
           type="primary"
           message="确定取消发布当前资源吗?"
@@ -36,25 +43,72 @@
         />
       </template>
       <template #customContent>
-        <a-descriptions :column="6" :colon="false" :labelStyle="{display:'block',lineHeight:'25px',color:'#666',width:'80px',textAlignLast:'justify'}"  size="small">
+        <a-descriptions
+          :column="6"
+          :colon="false"
+          :labelStyle="{
+            display: 'block',
+            lineHeight: '25px',
+            color: '#666',
+            width: '80px',
+            textAlignLast: 'justify',
+          }"
+          size="small"
+        >
           <a-descriptions-item :span="2">
             <template #label>
               <div style="display: flex">
-                <span style="display: block;text-align-last: justify;width: 70px;transform: translateY(50%);">封面</span>
+                <span
+                  style="
+                    display: block;
+                    text-align-last: justify;
+                    width: 70px;
+                    transform: translateY(50%);
+                  "
+                  >封面</span
+                >
               </div>
             </template>
-            <a-image v-if="mainData.attinfos && mainData.attinfos.filter(item => item.usetype == 'avatar').length" :src="mainData.attinfos.filter(item => item.usetype == 'avatar')[0].url" style="width:100px;height: 100px"></a-image>
+            <a-image
+              v-if="
+                mainData.attinfos &&
+                mainData.attinfos.filter((item) => item.usetype == 'avatar')
+                  .length
+              "
+              :src="
+                mainData.attinfos.filter((item) => item.usetype == 'avatar')[0]
+                  .url
+              "
+              style="width: 100px; height: 100px"
+            ></a-image>
           </a-descriptions-item>
         </a-descriptions>
       </template>
       <template #tab0>
-        <imgManage :rowData="mainData"></imgManage>
+        <photoWall
+          :attinfos="mainData.attinfos_pic"
+          pic
+          fileType="sourcefil"
+          :disabled="mainData.status == '发布'"
+          ownertable="sat_sharematerial"
+          :ownerid="mainData.sat_sharematerialid"
+        />
       </template>
       <template #tab1>
         <span class="normal-title" style="margin-bottom: 10px">基本信息</span>
         <defaultInfo :data="baseInfo">
           <template #封面图>
-            <a-image :src="mainData.attinfos.filter(item => item.usetype == 'avatar').length ? mainData.attinfos.filter(item => item.usetype == 'avatar')[0].url : ''" style="width:100px;height: 100px"></a-image>
+            <a-image
+              :src="
+                mainData.attinfos.filter((item) => item.usetype == 'avatar')
+                  .length
+                  ? mainData.attinfos.filter(
+                      (item) => item.usetype == 'avatar'
+                    )[0].url
+                  : ''
+              "
+              style="width: 100px; height: 100px"
+            ></a-image>
           </template>
         </defaultInfo>
         <span class="normal-title" style="margin: 10px 0">系统信息</span>
@@ -65,77 +119,88 @@
 </template>
 
 <script setup>
-import Api from '@/api/api'
-import utils  from '@/utils/utils'
-import detailTemplate from '@/components/detailTemplate/index.vue'
-import defaultInfo from '@/template/defaultInfo/index.vue'
-import customBtn from '@/components/customHandleBtn/index.vue'
-import Edit from '../modules/Edit.vue'
+import Api from "@/api/api";
+import utils from "@/utils/utils";
+import detailTemplate from "@/components/detailTemplate/index.vue";
+import defaultInfo from "@/template/defaultInfo/index.vue";
+import customBtn from "@/components/customHandleBtn/index.vue";
+import Edit from "../modules/Edit.vue";
 import { useRouter } from "vue-router";
-import {ref,defineProps,createVNode, defineComponent,onMounted, provide} from 'vue'
-import { Modal } from 'ant-design-vue';
-import imgManage from './imgManage.vue'
-const router = useRouter()
-const mainAreaData = ref([])
-const mainData = ref({})
-let baseInfo = ref([])
-let systemInfo = ref([])
-let classList = ref([])
-provide('classList',() => classList.value)
-const mianData = async ()=>{
+import {
+  ref,
+  defineProps,
+  createVNode,
+  defineComponent,
+  onMounted,
+  provide,
+} from "vue";
+import { Modal } from "ant-design-vue";
+import photoWall from "@/components/photoWall/index.vue";
+const router = useRouter();
+const mainAreaData = ref([]);
+const mainData = ref({});
+let baseInfo = ref([]);
+let systemInfo = ref([]);
+let classList = ref([]);
+provide("classList", () => classList.value);
+const mianData = async () => {
   const res = await Api.requested({
-    "id": "20240407094602",
-    "content": {
-        "sat_sharematerialid": router.currentRoute.value.query.id
-    }
-  })
-  res.data.attinfos = utils.fileList(res.data.attinfos)
-  mainData.value = res.data
-  console.log(mainData.value);
-  changeDataStructure(res.data)
+    id: "20240407094602",
+    content: {
+      sat_sharematerialid: router.currentRoute.value.query.id,
+    },
+  });
+  res.data.attinfos = utils.fileList(res.data.attinfos);
+  mainData.value = res.data;
+  console.log("mainData", mainData.value);
+  changeDataStructure(res.data);
 
   baseInfo.value = [
-    {label:'标题',value:mainData.value.title},
-    {label:'类型',value:mainData.value.type==1?'图片':'视频'},
-    {label:'排序',value:mainData.value.sequence},
-    {label:'是否画册',value:mainData.value.ispicture?'是':'否'},
-    {label:'是否二维码',value:mainData.value.isqrcode?'是':'否'},
-    {label:'扫码地址',value:mainData.value.qrcodecontent},
-    {label:'推荐',value:`${mainData.value.canshared_c?'支持对外、':''}${mainData.value.candownload_c?'支持下载':''}`},
-    {label:'状态',value:mainData.value.status},
-    {label:'封面图',value:'custom'},
-  ]
+    { label: "标题", value: mainData.value.title },
+    { label: "类型", value: mainData.value.type == 1 ? "图片" : "视频" },
+    { label: "排序", value: mainData.value.sequence },
+    { label: "是否画册", value: mainData.value.ispicture ? "是" : "否" },
+    { label: "是否二维码", value: mainData.value.isqrcode ? "是" : "否" },
+    { label: "扫码地址", value: mainData.value.qrcodecontent },
+    {
+      label: "推荐",
+      value: `${mainData.value.canshared_c ? "支持对外、" : ""}${
+        mainData.value.candownload_c ? "支持下载" : ""
+      }`,
+    },
+    { label: "状态", value: mainData.value.status },
+    { label: "封面图", value: "custom" },
+  ];
   systemInfo.value = [
-    {label:'创建人',value:mainData.value.createby},
-    {label:'创建时间',value:mainData.value.createdate},
-    {label:'最近编辑人',value:mainData.value.changeby},
-    {label:'最近编辑时间',value:mainData.value.changedate},
-    {label:'发布人',value:mainData.value.checkby},
-    {label:'发布时间',value:mainData.value.checkdate},
-  ]
-}
-
+    { label: "创建人", value: mainData.value.createby },
+    { label: "创建时间", value: mainData.value.createdate },
+    { label: "最近编辑人", value: mainData.value.changeby },
+    { label: "最近编辑时间", value: mainData.value.changedate },
+    { label: "发布人", value: mainData.value.checkby },
+    { label: "发布时间", value: mainData.value.checkdate },
+  ];
+};
 
 const getClassList = async () => {
   let res = await Api.requested({
-    'id':20221102143202,
-    'content': {
-      "parentid":0,
-      'where': {
-        isenable:1
-      }
-    }
-  })
-  classList.value = res.data
-}
+    id: 20221102143202,
+    content: {
+      parentid: 0,
+      where: {
+        isenable: 1,
+      },
+    },
+  });
+  classList.value = res.data;
+};
 
 const changeDataStructure = (data) => {
-  mainAreaData.value = utils.FormLayout('detailsHead',data)
-}
-onMounted (()=>{
-  mianData()
-  getClassList()
-})
+  mainAreaData.value = utils.FormLayout("detailsHead", data);
+};
+onMounted(() => {
+  mianData();
+  getClassList();
+});
 </script>
 <style>
 </style>