2025-5-26提交

杨磊

2025-05-26 96be59a64cc1d8fcaf1034e787717663c68df4a7

 src/views/model/children/landerModel.vue

@@ -1,14 +1,16 @@
<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>
@@ -20,73 +22,455 @@
        border
        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>
    <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 { 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(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) => {
  currentPage.value = val;
  getTableData();
};

const handleSelectionChange = (val: []) => {
  console.log(val);
  multipleSelection.value = val;
};
</script>
@@ -94,13 +478,31 @@
<style lang="less" scoped>
.landerBox {
  width: 100%;
  height: 100%;

  .landerTopBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .landerContentBox {
    width: 100%;
    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>