| | |
| | | <template> |
| | | <div class="landerBox"> |
| | | <div class="landerTopBox"> |
| | | <el-button :icon="Plus">新建</el-button> |
| | | <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"><search /></el-icon> |
| | | <el-icon class="el-input__icon" @click="getTableData" |
| | | ><search |
| | | /></el-icon> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | |
| | | style="width: 100%" |
| | | @selection-change="handleSelectionChange" |
| | | class="landerTable" |
| | | v-loading="isLoading" |
| | | > |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column prop="index" label="序号" width="70" /> |
| | | <el-table-column prop="date" label="Date" width="180" /> |
| | | <el-table-column prop="name" label="Name" width="180" /> |
| | | <el-table-column prop="address" label="Address" /> |
| | | <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> |
| | | <div class="lander-pagination-block"> |
| | | <el-pagination |
| | | v-model:current-page="currentPage" |
| | | :page-size="pageSize" |
| | | :size="size" |
| | | :background="background" |
| | | layout="total, prev, pager, next" |
| | | :total="100" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | <el-dialog v-model="dialogTableVisible" title="预览"> |
| | | <div> |
| | | <iframe |
| | | style="width: 100%; height: 500px" |
| | | src="../static/modelView/index.html?md5=62d4eadc420b7403fce2be993baa095d&name=飞行棋&domain=https://www.jlstp.cn&target=iframe" |
| | | frameborder="0" |
| | | ></iframe> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <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-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 { ref } from "vue"; |
| | | import { inject, onMounted, reactive, ref, watch } from "vue"; |
| | | import { Plus } from "@element-plus/icons-vue"; |
| | | import type { ComponentSize, TableInstance } from "element-plus"; |
| | | |
| | | import { curStoreInfo } from "@/store/index"; |
| | | 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(4); |
| | | 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 previewUrl = ref( |
| | | "./static/modelView/index.html?md5=62d4eadc420b7403fce2be993baa095d&name=飞行棋&domain=https://www.jlstp.cn&target=iframe" |
| | | ); |
| | | const form = reactive({ |
| | | ModelName: "", |
| | | JointData: "", |
| | | IsSimulation: false, |
| | | ModelRemarks: "", |
| | | }); |
| | | 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"); |
| | | |
| | | const tableData = [ |
| | | { |
| | | id: 1, |
| | | date: "2016-05-03", |
| | | name: "Tom", |
| | | address: "No. 189, Grove St, Los Angeles", |
| | | }, |
| | | { |
| | | id: 2, |
| | | date: "2016-05-02", |
| | | name: "Tom", |
| | | address: "No. 189, Grove St, Los Angeles", |
| | | }, |
| | | { |
| | | id: 3, |
| | | date: "2016-05-04", |
| | | name: "Tom", |
| | | address: "No. 189, Grove St, Los Angeles", |
| | | }, |
| | | { |
| | | id: 4, |
| | | date: "2016-05-01", |
| | | name: "Tom", |
| | | address: "No. 189, Grove St, Los Angeles", |
| | | }, |
| | | { |
| | | id: 5, |
| | | date: "2016-05-08", |
| | | name: "Tom", |
| | | address: "No. 189, Grove St, Los Angeles", |
| | | }, |
| | | { |
| | | id: 6, |
| | | date: "2016-05-06", |
| | | name: "Tom", |
| | | address: "No. 189, Grove St, Los Angeles", |
| | | }, |
| | | { |
| | | id: 7, |
| | | date: "2016-05-07", |
| | | name: "Tom", |
| | | address: "No. 189, Grove St, Los Angeles", |
| | | }, |
| | | ]; |
| | | getTableData(); |
| | | } |
| | | } |
| | | ); |
| | | |
| | | // 搜索 |
| | | 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 handlePreview = (row) => { |
| | | dialogTableVisible.value = true; |
| | | }; |
| | | //上移操作 |
| | | const handleMoveUp = (row) => {}; |
| | | //下移操作 |
| | | const handleMoveDown = (row) => { |
| | | console.log(row, "row"); |
| | | console.log(tableData.value, "tableData"); |
| | | }; |
| | | |
| | | const getTableData = async () => { |
| | | isLoading.value = true; |
| | | const fields = { |
| | | ModelName: [], |
| | | 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; |
| | | } |
| | | 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; |
| | | } |
| | | fieldList.push(fieldObj); |
| | | } |
| | | 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) => { |
| | | console.log(`current page: ${val}`); |
| | | currentPage.value = val; |
| | | getTableData(); |
| | | }; |
| | | |
| | | const handleSelectionChange = (val: []) => { |