TBA_GXPT/ruoyi-ui/src/views/standardization/modelUsing/index.vue

<template>
  <div
      style="width: 98%;display: flex;align-items: center;justify-content: space-between;padding-top: 1%;margin-left: 1%;">
    <div style="font-size: 20px;">
      模型应用
    </div>
    <div style="display: flex;">
      <el-input size="mini" v-model="dcName" style="width: 100%;margin-left: 1%;" placeholder="搜索项目"/>
      <el-button type="primary" @click="showAdd" size="mini" style="margin-left:5%;" :icon="Plus">新增</el-button>
    </div>
  </div>
  <div
      style="width: 98%;display: flex;align-items: center;justify-content: space-between;padding-top: 1%;margin-left: 1%;">
    <el-select
        v-model="formJi"
        class="noBorSel"
        placeholder="全部"
        style="width: 10%;margin-left: 0%;"
    >
      <el-option label="全部" :value="1"/>
      <el-option label="已发布" :value="2"/>
    </el-select>
  </div>
  
  <div
      style="height: 70vh;width: 98%;margin-left:1%;background-color: transparent;margin-top: 1%;display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 0.65%">
    <div v-for="(item,index) in modelList">
      <div class="coz-card" @mouseenter="setHoverIndex(index)" @click="goFlow(item)" style="cursor: pointer;"
           @mouseleave="resetHoverIndex">
        <div style="display: flex;width: 100%;">
          <div style="margin-left: 8%;margin-top: 5%;width: 60%;font-size: 17px;">
            {{ item.appTitle }}
            <div style="margin-top: 10%;font-size: 16px;">
                模型描述：{{ item.appNote }}
            </div>
          </div>
          <!-- <img style="width: 90px;height: 90px;margin-left: 0%;margin-top: 8%;border-radius: 12px;" :src="item.appIcon" v-if="item.appIcon!==null"
               alt="">
          <img style="width: 90px;height: 90px;margin-left: 0%;margin-top: 8%;border-radius: 12px;" v-if="item.appIcon==null" src="@/assets/images/defaultModel.png"
               alt=""> -->
               <img style="width: 90px;height: 90px;margin-left: 0%;margin-top: 8%;border-radius: 12px;"  src="@/assets/images/defaultModel.png"
               alt="">
        </div>
        
        <div>
          <el-tag style="margin-left: 8%;margin-top: -1%;">应用</el-tag>
        </div>
        <div style="display: flex;align-items: center;margin-left: 8%;margin-top: 3%;line-height: 1.5;width: 85%;">
          <img style="width: 4%;height: 4%;border-radius: 13px;" src="@/assets/images/touxiang.png" alt="">
          <div style="margin-left: 3%;font-size: 12px;">
            创建人：{{ item.createBy }} 更新时间：{{ item.createTime }}
          </div>
          <el-icon style="color: #79bbff;margin-left: auto;cursor: pointer;" @click.stop="handleBizDataShowConfig(item)"
                   v-if="hoverIndex === index">
            <TrendCharts/>
          </el-icon>
          <el-icon style="color: #79bbff;margin-left: auto;cursor: pointer;" @click.stop="editModel(item)"
                   v-if="hoverIndex === index">
            <Edit/>
          </el-icon>
          <el-icon style="color: red;margin-left: 2%;cursor: pointer;" @click.stop="delModel(item)"
                   v-if="hoverIndex === index">
            <Delete/>
          </el-icon>
        </div>
      </div>
    </div>
  </div>
  <el-pagination
      v-if="total>12"
      small
      background
      style="margin-top: 0.8%;float: right;margin-right: 1%;"
      layout="prev, pager, next"
      :total="total"
      v-model="pageNum"
      @change="changePage"
      class="mt-4"
  />
  <el-dialog
      :title="title"
      v-model="isContentVisible"
      width="30%"
      @close="clearForm"
  >
    <div>
      <el-form ref="formAddref" :model="formAdd" label-width="100px" class="coz-mg-card" :rules="rulesAdd">
        <el-form-item label="模型名称:" prop="appTitle">
          <el-input v-model="formAdd.appTitle" placeholder="请输入应用名称"></el-input>
        </el-form-item>
        <el-form-item label="模型描述:" prop="appNote">
          <el-input type="textarea" v-model="formAdd.appNote" placeholder="请输入应用描述"></el-input>
        </el-form-item>
        <el-form-item label="图标:">
          <div style="display: flex;width: 100%;">
            <img v-if="!previewUrl" style="width: 80px;height:80px;margin-left: 0%;margin-top: 0%;border-radius: 12px;"
                 src="@/assets/images/defaultModel.png" alt="">
            <img v-if="previewUrl" style="width: 80px;height:80px;margin-left: 0%;margin-top: 0%;border-radius: 12px;"
                 :src="previewUrl" alt="">
          </div>
          <el-upload
              ref="uploadRef"
              style="margin-top: 3%;"
              :limit="1"
              :show-file-list="false"
              :file-list="fileList"
              :headers="upload.headers"
              :on-progress="handlepro"
              :on-success="handleFileSuccess"
              :on-change="handleChange"
              :action="upload.url + '?file=' + upload.updateSupport"
              :auto-upload="false"
          >
            <el-button slot="trigger" @click="clearDefault" plain type="primary" size="mini" style="margin-left:auto;width: 80px;"
                       :icon="Upload">上传
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="isContentVisible = false">取消</el-button>
      <el-button v-if="isAdd" type="primary" @click="submitAdd">确定</el-button>
      <el-button v-if="!isAdd" type="primary" @click="subEdit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import {onMounted, ref} from 'vue'
import {Delete, Plus, Upload} from '@element-plus/icons-vue'
import {addModeling, delModeling, editModeling, getModelingById, getModellist} from '@/api/standardization/modeling'
import {getToken} from '@/utils/auth'
import imagePath from '@/assets/images/defaultModel.png';
import {useStore} from 'vuex';
import router from "@/router/index.js";
import defaultAvatar from '@/assets/images/defaultModel.png'

const {proxy} = getCurrentInstance();
const imageUrl = ref(defaultAvatar)
const title = ref()
const heightAll = window.innerHeight
const isContentVisible = ref(false)
const isAdd = ref(true)
const pageNum = ref(1)
const modelList = ref([])
const total = ref(0)
const hoverIndex = ref(-1)
const uploadRef = ref()
const fileList = ref([
  {
    name: '', // 文件名
    url: defaultAvatar , // 文件访问URL
    status: 'ready', // 文件状态：success-上传成功
    uid: new Date().getTime() // 唯一标识
  }
]);
const formAdd = ref({
  appTitle: '',
  appNote: '',
});
const formAddref = ref()

const rulesAdd = reactive({
  appTitle: [{required: true, message: '必填', trigger: 'blur'}],
  appNote: [{required: true, message: '必填', trigger: 'blur'}],
});
const parModel = ref({})
const parFile = ref({})
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: '',
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/common/upload"
});
const previewUrl = ref()

const store = useStore();
const setHoverIndex = (index) => {
  hoverIndex.value = index;
};

const resetHoverIndex = () => {
  hoverIndex.value = -1;
};

function goFlow(item) {
  store.commit('setId', item.appId);
  
  proxy.$router.push({path: '/standardization/modeling'});
}
function clearForm(){
  formAdd.value = {}
  previewUrl.value = ''
}
function editModel(item) {
  parModel.value = item
  isAdd.value = false
  isContentVisible.value = true
  title.value = '修改模型应用'
  getModelingById(item.appId).then(res => {
    if (res.code === 200) {
      const parUrl = import.meta.env.VITE_APP_BASE_API 
      formAdd.value.appTitle = res.data.appTitle
      formAdd.value.appNote = res.data.appNote
      formAdd.value.appId = res.data.appId
      formAdd.value.appIcon = parUrl + res.data.appIcon
      previewUrl.value = res.data.appIcon ? parUrl + res.data.appIcon : imagePath;
      console.log(previewUrl.value)
    } else {
      proxy.$message.error('获取模型详情失败');
    }
  }).catch(() => {
    proxy.$message.error('获取模型详情失败');
  });
}

function handleBizDataShowConfig(data) {
  router.push("/standardization/modeling/bizDataShowConfig/" + data.appId)
}

function subEdit() {
  if (parFile.value) {
    formAddref.value.validate(async (valid) => {
      if (valid) {
        editModeling(formAdd.value).then(res => {
          if (res.code === 200) {
            proxy.$message({
              message: '修改成功',
              type: 'success'
            });
            isContentVisible.value = false;
            getList();
          }
        })
      }
    })
  } else {
    
  }
  // formAddref.value.validate(async (valid) => {
  //   if (valid) {
  //     nextTick(() => {
  //       uploadRef.value.submit();
  //     });
  //   }
  // })
}

function delModel(item) {
  proxy.$confirm('是否删除该模型应用？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    delModeling(item.appId).then(res => {
      if (res.code === 200) {
        proxy.$message({
          message: '删除成功',
          type: 'success'
        });
        getList();
      } else {
        proxy.$message.error('删除失败');
      }
    })
  }).catch(() => {

  });
}

function submitAdd() {
  if (parFile.value) {
    formAddref.value.validate(async (valid) => {
      if (valid) {
        addModeling(formAdd.value).then(res => {
          if (res.code === 200) {
            proxy.$message({
              message: '新增成功',
              type: 'success'
            });
            isContentVisible.value = false;
            getList();
          } else {
            proxy.$message.error('新增失败');
          }
        })
      }
    })

  } else {
    formAddref.value.validate(async (valid) => {
      if (valid) {
        nextTick(() => {
          uploadRef.value.submit();
        });
      }
    })
  }
  // formAddref.value.validate(async (valid) => {
  //   if (valid) {
  //     nextTick(() => {
  //       uploadRef.value.submit();
  //     });
  //   }
  // })
}

function handleFileSuccess(response, file, fileList) {
  console.log("上传成功的响应:", response);
  if (response.code === 200) {
    if (isAdd.value === true) {
      formAdd.value.appIcon = response.fileName
      addModeling(formAdd.value).then(res => {
        if (res.code === 200) {
          proxy.$message({
            message: '新增成功',
            type: 'success'
          });
          isContentVisible.value = false;
          getList();
        } else {
          proxy.$message.error('新增失败');
        }
      }).catch(() => {
        proxy.$message.error('新增失败');
      });
    } else {
      formAdd.value.appIcon = response.fileName
      editModeling(formAdd.value).then(res => {
        if (res.code === 200) {
          proxy.$message({
            message: '修改成功',
            type: 'success'
          });
          isContentVisible.value = false;
          getList();
        } else {
          proxy.$message.error('修改失败');
        }
      }).catch(() => {
        proxy.$message.error('修改失败');
      });
    }
  }
};

function clearDefault() {
  uploadRef.value.clearFiles();
}

function handleChange(file, fileList) {
  parFile.value = file
  const rawFile = file.raw;
  previewUrl.value = URL.createObjectURL(rawFile);
}

function showAdd() {
  isAdd.value = true
  isContentVisible.value = true
  title.value = '新增模型应用'
}

function changePage(val) {
  console.log(val)
  pageNum.value = val,
      getList()
}

function getList() {
  var par = {
    pageSize: 12,
    pageNum: pageNum.value,
  }
  getModellist(par).then(res => {
    modelList.value = res.rows
    total.value = res.total
    modelList.value.forEach(item=>{
      item.appIcon = item.appIcon
    })
  })
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
:deep(.el-upload .el-upload--picture-card) {
  height: 100px !important;
  width: 100px !important;
}

.coz-card {
  margin-top: 5%;
  height: 20vh;
  width: 24vw;
  border-radius: 6px;
  border: 1px solid;
  border-style: solid;
  overflow: hidden;
  border-color: #e9e9eb;
  transition: all 150ms ease-out;
}

.coz-card:hover {
  box-shadow: 0 10px 12px 0 rgba(28, 31, 35, 0.06);
}

/* 自定义类名需保留 */
.coz-stroke-primary {
  stroke: var(--primary-color); /* 需替换为实际颜色值 */
}

.coz-mg-card {
  margin: 10px; /* 根据实际需求调整 */
}

</style>