刘洋 1 tahun lalu
induk
melakukan
e6d315aae3

+ 100 - 0
src/components/global/image-viewer/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div :style="{ width: width + 'px', height: height + 'px' }">
+    <t-image-viewer :images="images">
+      <template #trigger="{ open }">
+        <div class="tdesign-demo-image-viewer__ui-image">
+          <img
+            :src="images?.[0]"
+            class="tdesign-demo-image-viewer__ui-image--img"
+          />
+          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
+            <span><BrowseIcon size="1.4em" /> 预览</span>
+          </div>
+        </div>
+      </template>
+    </t-image-viewer>
+  </div>
+</template>
+
+<script name="ImageView" setup>
+import { BrowseIcon } from 'tdesign-icons-vue-next';
+const props = defineProps({
+  width: { type: Number, default: 80 },
+  height: { type: Number, default: 80 },
+  images: { type: Array, default: [] },
+});
+</script>
+
+<style lang="less" scoped>
+.tdesign-demo-image-viewer__ui-image {
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--td-radius-small);
+  overflow: hidden;
+}
+
+.tdesign-demo-image-viewer__ui-image--hover {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-anti);
+  line-height: 22px;
+  transition: 0.2s;
+}
+
+.tdesign-demo-image-viewer__ui-image:hover
+  .tdesign-demo-image-viewer__ui-image--hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.tdesign-demo-image-viewer__ui-image--img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  cursor: pointer;
+  position: absolute;
+}
+
+.tdesign-demo-image-viewer__ui-image--footer {
+  padding: 0 16px;
+  height: 56px;
+  width: 100%;
+  line-height: 56px;
+  font-size: 16px;
+  position: absolute;
+  bottom: 0;
+  color: var(--td-text-color-anti);
+  background-image: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  display: flex;
+  box-sizing: border-box;
+}
+
+.tdesign-demo-image-viewer__ui-image--title {
+  flex: 1;
+}
+
+.tdesign-demo-popup__reference {
+  margin-left: 16px;
+}
+
+.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
+  cursor: pointer;
+}
+</style>

+ 2 - 0
src/components/global/index.js

@@ -23,6 +23,7 @@ import Chart from './chart/index.vue';
 import SearchForm from './search-form/index.vue';
 import MyDialog from './my-dialog/index.vue';
 import SButton from './s-buttons/index.vue';
+import ImageView from './image-viewer/index.vue';
 
 use([
   CanvasRenderer,
@@ -48,5 +49,6 @@ export default {
     Vue.component('SearchForm', SearchForm);
     Vue.component('MyDialog', MyDialog);
     Vue.component('SButton', SButton);
+    Vue.component('ImageView', ImageView);
   },
 };

+ 8 - 2
src/views/resource-guard/device-guard/registration-query/registration-detail-dialog.vue

@@ -45,11 +45,17 @@
                 ></status-tag>
               </template>
               <template #basePhotoPath="{ col, row }">
-                <t-image
+                <!-- <t-image
                   v-if="row.basePhotoPath"
                   :src="row.basePhotoPath"
                   :style="{ width: '80px', height: '80px' }"
-                />
+                /> -->
+                <image-view
+                  v-if="row.basePhotoPath"
+                  :width="80"
+                  :height="80"
+                  :images="[row.basePhotoPath]"
+                ></image-view>
               </template>
             </t-table>
           </t-form-item>

+ 3 - 0
src/views/service-unit/service-unit-manage/regional-planning/index.vue

@@ -153,6 +153,9 @@ const columns = [
     type: 'multiple',
     width: 50,
     fixed: 'left',
+    disabled: ({ rowIndex }) => {
+      return tableData.value[rowIndex].serviceUnitStatus === 'FINISH';
+    },
   },
   { colKey: 'serviceUnitName', title: '服务单元', width: 160 },
   { colKey: 'regionName', title: '大区名称', width: 100 },

+ 8 - 2
src/views/sop/components/dynamic-form-item/device-table/device-in-table.vue

@@ -28,11 +28,17 @@
         <span class="tip" v-else>请编辑并填写</span>
       </template>
       <template #basePhotoPath="{ row }">
-        <t-image
+        <!-- <t-image
           v-if="row.basePhotoPath"
           :src="row.basePhotoPath"
           :style="{ width: '80px', height: '80px' }"
-        />
+        /> -->
+        <image-view
+          v-if="row.basePhotoPath"
+          :width="80"
+          :height="80"
+          :images="[row.basePhotoPath]"
+        ></image-view>
         <span class="tip" v-else>请编辑并上传</span>
       </template>
     </t-table>

+ 8 - 2
src/views/sop/components/dynamic-form-item/device-table/index.vue

@@ -23,11 +23,17 @@
         <status-tag :value="row.deviceStatus" type="runningStatus"></status-tag>
       </template>
       <template #basePhotoPath="{ row }">
-        <t-image
+        <!-- <t-image
           v-if="row.basePhotoPath"
           :src="row.basePhotoPath"
           :style="{ width: '80px', height: '80px' }"
-        />
+        /> -->
+        <image-view
+          v-if="row.basePhotoPath"
+          :width="80"
+          :height="80"
+          :images="[row.basePhotoPath]"
+        ></image-view>
       </template>
     </t-table>
     <t-button

+ 8 - 2
src/views/sop/sop-manage/device-out-in/device-table/index.vue

@@ -23,11 +23,17 @@
         <status-tag :value="row.deviceStatus" type="runningStatus"></status-tag>
       </template>
       <template #basePhotoPath="{ row }">
-        <t-image
+        <!-- <t-image
           v-if="row.basePhotoPath"
           :src="row.basePhotoPath"
           :style="{ width: '80px', height: '80px' }"
-        />
+        /> -->
+        <image-view
+          v-if="row.basePhotoPath"
+          :width="80"
+          :height="80"
+          :images="[row.basePhotoPath]"
+        ></image-view>
       </template>
     </t-table>
     <t-button