<template>
|
<div class="landerBox">
|
<div class="landerTopBox">
|
<el-button :icon="Plus" @click="dialogFormVisible = true">新建</el-button>
|
<el-input
|
v-model="input4"
|
style="width: 300px"
|
placeholder="请输入关键字搜索"
|
>
|
<template #suffix>
|
<el-icon class="el-input__icon" @click="getTableData"
|
><search
|
/></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="landerContentBox">
|
<el-table
|
ref="multipleTableRef"
|
:data="tableData"
|
row-key="id"
|
border
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
class="landerTable"
|
v-loading="isLoading"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="id" label="序号" width="70" />
|
<el-table-column prop="ModelName" label="模型名称" width="180" />
|
<el-table-column prop="JointData" label="关节数据量" width="180" />
|
<el-table-column prop="IsSimulation" label="是否可仿真" width="180">
|
<template #default="scope">
|
<span>{{ scope.row.IsSimulation ? "是" : "否" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createDate" label="创建时间" width="180" />
|
<el-table-column prop="creator" label="创建人">
|
<template #default="scope">
|
<span>{{ scope.row.creator.Name }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="option" label="操作">
|
<template #default="scope">
|
<div>
|
<el-button
|
type="primary"
|
size="small"
|
@click="handleEdit(scope.row)"
|
>编辑</el-button
|
>
|
<el-button
|
type="danger"
|
size="small"
|
@click="handleDelete(scope.row)"
|
>删除</el-button
|
>
|
<el-button
|
type="success"
|
size="small"
|
@click="handlePreview(scope.row)"
|
>预览</el-button
|
>
|
<el-button
|
v-if="scope.$index !== 0"
|
type="success"
|
size="small"
|
@click="handleMoveUp(scope.row)"
|
>上移</el-button
|
>
|
<el-button
|
v-if="scope.$index !== tableData.length - 1"
|
type="success"
|
size="small"
|
@click="handleMoveDown(scope)"
|
>下移</el-button
|
>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="lander-pagination-block">
|
<el-pagination
|
style="width: 100%"
|
v-model:current-page="currentPage"
|
:page-size="pageSize"
|
:size="size"
|
:background="background"
|
layout="total, prev, pager, next"
|
:total="tableTotal"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
<!-- 预览 -->
|
<previewModule ref="previewModelRef"></previewModule>
|
<el-dialog v-model="dialogFormVisible" title="新建模型">
|
<el-form :rules="rules" :model="form" ref="formRef">
|
<el-form-item
|
prop="ModelName"
|
label="模型名称"
|
:label-width="formLabelWidth"
|
>
|
<el-input v-model="form.ModelName" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="关键数据量" :label-width="formLabelWidth">
|
<el-input v-model="form.JointData" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="是否可仿真" :label-width="formLabelWidth">
|
<el-switch
|
v-model="form.IsSimulation"
|
class="ml-2"
|
style="--el-switch-on-color: #13ce66"
|
/>
|
</el-form-item>
|
<el-form-item label="模型文件" :label-width="formLabelWidth">
|
<el-upload
|
:before-upload="beforeUpload"
|
:limit="1"
|
v-if="!form.ModelFile"
|
>
|
<template #trigger>
|
<el-button type="primary">上传模型</el-button>
|
</template>
|
</el-upload>
|
<div v-else>{{ form.ModelFile.name }}</div>
|
</el-form-item>
|
|
<el-form-item label="备注" :label-width="formLabelWidth">
|
<el-input
|
v-model="form.ModelRemarks"
|
:rows="2"
|
type="textarea"
|
placeholder="请输入..."
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
<el-button type="primary" @click="SubmitEvent(formRef)">
|
确定
|
</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { inject, onMounted, reactive, ref, watch } from "vue";
|
import { Plus } from "@element-plus/icons-vue";
|
import { curStoreInfo } from "@/store/index";
|
import SparkMD5 from "spark-md5";
|
import previewModule from "@/components/previewModelDialog.vue";
|
import {
|
ComponentSize,
|
ElMessage,
|
FormInstance,
|
TableInstance,
|
} from "element-plus";
|
import { updateLocale } from "moment";
|
const MG: any = inject("MG");
|
const toolClass: any = inject("toolClass");
|
// 搜索
|
const input4 = ref("");
|
const formRef = ref<FormInstance>();
|
// 表格
|
const multipleTableRef = ref<TableInstance>();
|
const multipleSelection = ref<any[]>([]);
|
const dialogTableVisible = ref(false);
|
const dialogFormVisible = ref(false);
|
const formLabelWidth = "140px";
|
const typeInfo = ref();
|
// 分页
|
const currentPage = ref(1);
|
const pageSize = ref(20);
|
const size = ref<ComponentSize>("default");
|
const background = ref(true);
|
const isLoading = ref(false);
|
const tableData = ref([]);
|
const file = ref(null);
|
const md5 = ref("");
|
const previewUrl = ref(
|
"./static/modelView/index.html?md5=62d4eadc420b7403fce2be993baa095d&name=飞行棋&domain=https://www.jlstp.cn&target=iframe"
|
);
|
const form = reactive({
|
ModelName: "",
|
JointData: "",
|
IsSimulation: false,
|
ModelRemarks: "",
|
ModelFile: null,
|
});
|
|
const progress = ref(0);
|
const seleStore = curStoreInfo();
|
//分页数据量
|
const tableTotal = ref(0);
|
//当前编辑行
|
const currentRow = ref();
|
watch(
|
() => seleStore.channelInfo, // 监听 reactive 对象（默认深度监听）
|
(newVal) => {
|
if (newVal) {
|
console.log(newVal, "newVal");
|
console.log(seleStore.storeInfo, "seleStore");
|
|
getTableData();
|
}
|
}
|
);
|
|
const beforeUpload = (file) => {
|
file.value = file;
|
md5.value = "";
|
progress.value = 0;
|
|
if (file.value) {
|
const md5 = calculateMD5(file.value);
|
console.log(md5, "md5md5md5md5.value");
|
}
|
console.log(file.value, "file.value");
|
console.log(md5.value, "md5.value");
|
return false;
|
};
|
|
// 计算MD5
|
const calculateMD5 = (file) => {
|
const chunkSize = 1 * 1024 * 1024; // 2MB分块
|
const chunks = Math.ceil(file.size / chunkSize);
|
const spark = new SparkMD5.ArrayBuffer();
|
const fileReader = new FileReader();
|
|
let currentChunk = 0;
|
|
fileReader.onload = (e) => {
|
spark.append(e.target.result);
|
currentChunk++;
|
progress.value = Math.min(100, Math.floor((currentChunk / chunks) * 100));
|
|
if (currentChunk < chunks) {
|
loadNextChunk();
|
} else {
|
md5.value = spark.end();
|
console.log(md5.value, "md5.value");
|
console.log(file, "file.value");
|
|
if (md5.value) {
|
initFile(md5.value, file);
|
}
|
progress.value = 100;
|
}
|
};
|
|
fileReader.onerror = () => {
|
console.error("文件读取错误");
|
};
|
|
const loadNextChunk = () => {
|
const start = currentChunk * chunkSize;
|
const end = Math.min(start + chunkSize, file.size);
|
fileReader.readAsArrayBuffer(file.slice(start, end));
|
};
|
loadNextChunk();
|
};
|
|
const initFile = (md5, file) => {
|
form.ModelFile = {
|
name: file.name,
|
md5: md5,
|
};
|
MG.dps5
|
.postFileUploadGetFileInfo({
|
md5: md5,
|
})
|
.then((res) => {
|
console.log(res, "res");
|
if (res && !res.id) {
|
const body = {
|
name: file.name,
|
md5: md5,
|
fileName: file.value.name,
|
extension: file.name.split(".").pop(),
|
fileType: "model",
|
metaData: "",
|
type: "model",
|
icon: "",
|
size: file.size,
|
accessType: "Private", // Public and Private
|
};
|
|
MG.dps5.postFileUploadInitFile(body).then((initRes) => {
|
console.log(initRes, "initRes");
|
const params = {
|
Md5: md5,
|
IsLastOne: true,
|
Offset: 0,
|
file,
|
};
|
|
MG.dps5.postFileUploadUpload(params).then((uploadRes) => {
|
console.log(uploadRes, "uploadRes");
|
});
|
});
|
}
|
});
|
};
|
// 搜索
|
const handleSearch = () => {
|
console.log(input4.value, "input4");
|
};
|
// 编辑操作
|
const handleEdit = (row) => {
|
console.log(row, "row");
|
dialogFormVisible.value = true;
|
currentRow.value = row;
|
form.ModelName = row.ModelName;
|
form.JointData = row.JointData;
|
form.IsSimulation = row.IsSimulation == "1" ? true : false;
|
form.ModelRemarks = row.ModelRemarks;
|
};
|
//删除操作
|
const handleDelete = async (row) => {
|
const body = {
|
accessModule: "",
|
accessPath: seleStore.channelInfo.data.idPath,
|
accessStoreId: seleStore.storeInfo.storeId,
|
accessRepositoryId: seleStore.storeInfo.repositoryId,
|
accessItemId: seleStore.channelInfo.data.id,
|
parentId: seleStore.storeInfo.repositoryData.recycleChannel.id,
|
parentAccessRequest: {
|
accessModule: "",
|
accessPath: seleStore.storeInfo.repositoryData.recycleChannel.id + "",
|
accessStoreId: seleStore.storeInfo.repositoryData.storeId,
|
accessRepositoryId: seleStore.storeInfo.repositoryData.id,
|
accessItemId: seleStore.storeInfo.repositoryData.recycleChannel.id,
|
},
|
itemIds: [row.id],
|
};
|
const res = await MG.dps5.DelCmsItemByList(body);
|
ElMessage({
|
message: "删除成功",
|
type: "success",
|
});
|
getTableData();
|
};
|
//预览操作
|
const previewModelRef = ref<any>();
|
const showModelData = ref<any>(null);
|
const handlePreview = (row: any) => {
|
let md5: any = null;
|
try {
|
const fileData = row.fieldList.find((item: any) => item.FileList.length);
|
md5 = fileData.FileList[0].File.Md5;
|
} catch (error) {}
|
previewModelRef.value.handleDialogVisible(true, {
|
name: row.name,
|
md5,
|
});
|
};
|
//上移操作
|
const handleMoveUp = (row) => {};
|
//下移操作
|
const handleMoveDown = (row) => {
|
console.log(row, "row");
|
console.log(tableData.value, "tableData");
|
};
|
|
const getTableData = async () => {
|
isLoading.value = true;
|
const fields = {
|
ModelName: [],
|
ModelFile: [],
|
JointData: [],
|
IsSimulation: [],
|
ModelRemarks: [],
|
ChildrenCount: [],
|
};
|
let searchFields = {};
|
if (input4.value != "") {
|
searchFields = {
|
"ModelName*": [input4.value],
|
};
|
}
|
const body = {
|
path: seleStore.channelInfo.data.idPath,
|
type: "\\",
|
storeId: seleStore.storeInfo.storeId,
|
repositoryId: seleStore.storeInfo.repositoryId,
|
paging: {
|
Start: (currentPage.value - 1) * pageSize.value,
|
Size: pageSize.value,
|
},
|
linkTypes: [],
|
fields: { ...fields, ...searchFields },
|
filters: {
|
"SysType=": ["CmsItem"],
|
},
|
};
|
const queryTableData = await toolClass.getCmsItem(body);
|
tableData.value = queryTableData.datas;
|
tableTotal.value = queryTableData.total;
|
isLoading.value = false;
|
};
|
|
//校验规则
|
const rules = reactive({
|
ModelName: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
});
|
onMounted(() => {
|
getType();
|
});
|
//获取类型
|
const getType = async () => {
|
const type = await MG.dps5.GetTypeByRefCode({
|
refCodes: ["ModelRemarks"],
|
});
|
const typeData = toolClass.handleTypeList(type);
|
typeInfo.value = typeData[0];
|
};
|
|
const SubmitEvent = async (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
await formEl.validate(async (valid, fields) => {
|
if (valid) {
|
if (currentRow.value) {
|
console.log(form, "fields");
|
console.log(currentRow.value, "currentRow");
|
const keys = Object.keys(form);
|
const editObj = {
|
add: [],
|
update: [],
|
delete: [],
|
};
|
for (const key of keys) {
|
const typeField = typeInfo.value.typeLinkList[0].children.find(
|
(item: any) => item.typeField.refCode === key
|
);
|
|
if (
|
form[key] &&
|
currentRow.value[key] &&
|
form[key] != currentRow.value[key]
|
) {
|
const updateObj = {
|
baseType: typeField.typeField.baseType,
|
order: typeField.order,
|
itemDataId: currentRow.value.datas[key].Id,
|
data: form[key],
|
link: {},
|
linkFiles: [],
|
};
|
editObj.update.push(updateObj);
|
} else if (form[key] == "" && currentRow.value[key] != "") {
|
const curField = currentRow.value.datas[key].Id;
|
editObj.delete.push(curField);
|
} else if (!currentRow.value[key] && form[key] != "") {
|
const fieldObj = {
|
baseType: typeField.typeField.baseType,
|
order: typeField.order,
|
link: {},
|
linkFiles: [],
|
addLinkItems: [],
|
typeFieldId: typeField.typeField.id,
|
refCode: typeField.typeField.refCode,
|
sequenceNum: typeField.cfg.uuid,
|
};
|
switch (key) {
|
case "ModelName":
|
fieldObj["strValue"] = form[key];
|
break;
|
case "JointData":
|
fieldObj["strValue"] = form[key];
|
break;
|
case "IsSimulation":
|
fieldObj["intValue"] = form[key] ? 1 : 0;
|
break;
|
case "ModelRemarks":
|
fieldObj["textValue"] = form[key];
|
break;
|
case "ModelFile":
|
fieldObj["linkFiles"].push(form[key].md5);
|
break;
|
}
|
editObj.add.push(fieldObj);
|
}
|
}
|
console.log(editObj, "editObj");
|
|
const params = {
|
updateList: [
|
{
|
accessModule: "",
|
accessPath: seleStore.channelInfo.data.idPath,
|
accessStoreId: seleStore.storeInfo.storeId,
|
accessRepositoryId: seleStore.storeInfo.repositoryId,
|
accessItemId: seleStore.channelInfo.data.id,
|
sysType: "CmsItem",
|
linkType: "Link",
|
// name: form.ModelName,
|
delCmsItemDataRequest: editObj.delete.length
|
? { cmsItemDataIds: editObj.delete }
|
: null,
|
addCmsItemDataListRequest: editObj.add.length
|
? { dataRequests: editObj.add }
|
: null,
|
updateCmsItemDataListRequest: {
|
cmsItemId: currentRow.value.id,
|
dataRequests: editObj.update,
|
},
|
},
|
],
|
};
|
const res = await MG.dps5.UpdateCmsItem(params);
|
dialogFormVisible.value = false;
|
ElMessage({
|
message: "编辑成功",
|
type: "success",
|
});
|
getTableData();
|
} else {
|
const keys = Object.keys(form);
|
const fieldList = [];
|
for (const key of keys) {
|
const typeField = typeInfo.value.typeLinkList[0].children.find(
|
(item: any) => item.typeField.refCode === key
|
);
|
|
const fieldObj = {
|
baseType: typeField.typeField.baseType,
|
order: typeField.order,
|
link: {},
|
linkFiles: [],
|
addLinkItems: [],
|
typeFieldId: typeField.typeField.id,
|
refCode: typeField.typeField.refCode,
|
sequenceNum: typeField.cfg.uuid,
|
};
|
switch (key) {
|
case "ModelName":
|
fieldObj["strValue"] = form[key];
|
break;
|
case "JointData":
|
fieldObj["strValue"] = form[key];
|
break;
|
case "IsSimulation":
|
fieldObj["intValue"] = form[key] ? 1 : 0;
|
break;
|
case "ModelRemarks":
|
fieldObj["textValue"] = form[key];
|
break;
|
case "ModelFile":
|
fieldObj["linkFiles"].push(form[key].md5);
|
break;
|
}
|
fieldList.push(fieldObj);
|
}
|
|
console.log(fieldList, "fieldList");
|
|
debugger;
|
const params = {
|
accessModule: "",
|
accessPath: seleStore.channelInfo.data.idPath,
|
accessStoreId: seleStore.storeInfo.storeId,
|
accessRepositoryId: seleStore.storeInfo.repositoryId,
|
accessItemId: seleStore.channelInfo.data.id,
|
sysType: "CmsItem",
|
linkType: "Link",
|
cmsItemRequest: {
|
name: form.ModelName,
|
description: form.ModelRemarks,
|
type: "Normal",
|
state: "Normal",
|
accessType: "Private",
|
cmsTypeId: typeInfo.value.id,
|
cmsItemDataList: fieldList,
|
linkCmsItemDataIds: [],
|
linkOrgIds: [1],
|
linkDepartmentIds: [1],
|
},
|
newProcessInstanceCmsItemRightsPointRequests: [],
|
};
|
console.log(seleStore.channelInfo, "seleStore.channelInfo");
|
const res = await MG.dps5.NewCmsItem(params);
|
dialogFormVisible.value = false;
|
ElMessage({
|
message: "新建成功",
|
type: "success",
|
});
|
getTableData();
|
}
|
}
|
});
|
};
|
const handleCurrentChange = (val: number) => {
|
currentPage.value = val;
|
getTableData();
|
};
|
|
const handleSelectionChange = (val: []) => {
|
multipleSelection.value = val;
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.landerBox {
|
width: 100%;
|
height: 100%;
|
|
.landerTopBox {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
padding: 0 10px;
|
box-sizing: border-box;
|
}
|
.landerContentBox {
|
max-height: calc(100% - 120px);
|
padding: 0 10px;
|
box-sizing: border-box;
|
|
.landerTable {
|
height: 750px;
|
}
|
}
|
.lander-pagination-block {
|
height: 60px;
|
display: flex;
|
justify-content: flex-end;
|
padding: 0 20px;
|
background-color: #fff;
|
}
|
}
|
</style>
|
