场景报告模块（暂存）

riku

2024-11-04 069da66fbe2748d51b1f3bc63f9ae00e660083c6

 src/views/fysp/data-product/components/CompProblemTable.vue

@@ -2,56 +2,100 @@
  <table>
    <tbody>
      <tr>
        <td>{{ title }}</td>
        <td colspan="2">{{ title }}</td>
      </tr>
      <tr>
        <td>
        <td style="position: relative">
          <el-image
            class="image"
            :src="seletcedProblemPic"
            :preview-src-list="[seletcedProblemPic]"
            :preview-src-list="seletcedProblemPic ? [seletcedProblemPic] : []"
            :initial-index="0"
            fit="cover"
            lazy
          />
          >
            <template #error v-if="!seletcedProblemPic">
              <div class="image-slot">
                <el-text>问题图片未上传</el-text>
              </div>
            </template>
          </el-image>
          <el-button
            class="pop-button"
            size="small"
            @click="proDialog = true"
            >{{ btnName }}</el-button
          >
        </td>
        <td>
        <td style="position: relative">
          <el-image
            class="image"
            :src="seletcedChangePic"
            :preview-src-list="[seletcedChangePic]"
            :src="seletcedChangePic ? seletcedChangePic : unchangeImg"
            :preview-src-list="seletcedChangePic ? [seletcedChangePic] : []"
            :initial-index="0"
            fit="cover"
            lazy
          />
          <el-button
            class="pop-button"
            size="small"
            @click="changeDialog = true"
            >{{ btnName }}</el-button
          >
        </td>
      </tr>
      <tr>
        <td>
          <el-row justify="space-between" align="middle">
            <div>位置：{{ problem.location }}</div>
            <div>描述：{{ problem.problemname }}</div>
            <el-button size="small" @click="$emit('change')">{{
              btnName
            }}</el-button>
          </el-row>
          <div>
            描述：
            <el-input
              size="small"
              v-model="problemDes"
              placeholder="问题描述"
              style="width: 150px"
            />
          </div>
        </td>
        <td>
          <el-row justify="space-between" align="middle">
            <div>位置：{{ problem.location }}</div>
            <div>描述：{{ problem.problemname }}</div>
            <el-button size="small" @click="$emit('change')">{{
              btnName
            }}</el-button>
          </el-row>
          <div>
            描述：
            <el-input
              size="small"
              v-model="changeDes"
              placeholder="整改描述"
              style="width: 150px"
            />
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <CompProblemPicSelect
    v-if="pics.length > 0"
    v-model:dialog-visible="proDialog"
    mode="problem"
    :pics="pics[0].path"
    :defaultFile="[{ url: seletcedProblemPic }]"
    @submit="handleProPicSelect"
  ></CompProblemPicSelect>
  <CompProblemPicSelect
    v-if="pics.length > 1"
    v-model:dialog-visible="changeDialog"
    mode="change"
    :pics="pics[1].path"
    :defaultFile="[{ url: seletcedChangePic }]"
    @submit="handleChangePicSelect"
  ></CompProblemPicSelect>
</template>
<script setup>
import { ref, watch } from 'vue';
import ProCheckProxy from '@/views/check/ProCheckProxy';
import { ref, watch, computed } from 'vue';
import dayjs from 'dayjs';
import ProCheckProxy from '@/views/fysp/check/ProCheckProxy';
import unchangeImg from '@/assets/image/unchange.png';

import CompProblemPicSelect from './CompProblemPicSelect.vue';

const props = defineProps({
  problem: {
@@ -59,14 +103,27 @@
    default: () => {
      return {};
    }
  },
  btnName: {
    type: String,
    default: '修改'
  }
});

const emit = defineEmits(['change']);

const pics = ref([]);
const proDialog = ref(false);
const seletcedProblemPic = ref();
const changeDialog = ref(false);
const seletcedChangePic = ref();
const problemDes = ref('');
const changeDes = ref('未整改');

const title = computed(() => {
  const time = dayjs(props.problem.time).format('M月');
  return `${time}现场问题及整改图片`;
});

function getPics() {
  pics.value = ProCheckProxy.proPics(props.problem);
@@ -78,11 +135,25 @@
  }
}

function handleProPicSelect(imgList) {
  if (imgList && imgList.length > 0) {
    seletcedProblemPic.value = imgList[0].url;
  }
}

function handleChangePicSelect(imgList) {
  if (imgList && imgList.length > 0) {
    seletcedChangePic.value = imgList[0].url;
  }
}

watch(
  () => props.problem,
  (nV, oV) => {
    if (nV != oV) {
      getPics();
      problemDes.value = nV.problemname;
      changeDes.value = nV.ischanged ? '已整改' : '未整改';
    }
  },
  { immediate: true }
@@ -113,4 +184,19 @@
  border-style: solid;
  border-color: #666666; */
}

.pop-button {
  position: absolute;
  bottom: 0;
  right: 0;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
}
</style>