工艺详情页界面

src/router/index.js

@@ -193,6 +193,36 @@ export const dynamicRoutes = [
       }
     ]
   },
+  // 工艺详情
+  {
+    path: '/system/technology/technologyDetail',
+    component: Layout,
+    hidden: true,
+    permissions: ['iscs:loto:list'],
+    children: [
+      {
+        path: 'craftDetail',
+        component: () => import('@/views/system/technology/technologyDetail/craftDetail'),
+        name: 'craftDetail',
+        meta: { title: '工艺详情' }
+      }
+    ]
+  },
+  // 设备详情
+  {
+    path: '/system/technology/technologyDetail',
+    component: Layout,
+    hidden: true,
+    permissions: ['iscs:loto:list'],
+    children: [
+      {
+        path: 'deviceDetail',
+        component: () => import('@/views/system/technology/technologyDetail/deviceDetail'),
+        name: 'deviceDetail',
+        meta: { title: '设备详情' }
+      }
+    ]
+  },
   {
     path: '/mes/hw/lotoStation/index',
     component: Layout,

src/views/system/technology/technologyDetail/craftDetail.vue

@@ -0,0 +1,613 @@
+<template>
+  <div class="app-container">
+    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
+      <el-radio-button label="craftInformation">工艺信息</el-radio-button>
+      <el-radio-button label="deviceList">设备列表</el-radio-button>
+      <el-radio-button label="Loto">LOTO站</el-radio-button>
+      <el-radio-button label="sopList">SOP列表</el-radio-button>
+    </el-radio-group>
+
+    <!-- 设备列表 -->
+    <div class="device" v-if="this.tabPosition == 'deviceList'">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['iscs:machinery:add']"
+            >新增
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="danger"
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['mes:hw:information:batchremove']"
+            >批量删除</el-button
+          >
+        </el-col>
+        <!-- <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="info"
+            plain
+            icon="el-icon-sort"
+            size="mini"
+            @click="toggleExpandAll"
+            >展开/折叠
+          </el-button>
+        </el-col> -->
+        <right-toolbar
+          :showSearch.sync="showSearch"
+          @queryTable="getList"
+        ></right-toolbar>
+      </el-row>
+
+      <el-table
+        v-if="refreshTable"
+        v-loading="loading"
+        :data="deptList"
+        row-key="machineryId"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column
+          prop="machineryCode"
+          label="设备编码"
+        ></el-table-column>
+        <el-table-column
+          prop="machineryName"
+          label="设备名称"
+        ></el-table-column>
+        <el-table-column
+          label="设备详情"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-no-more-click
+              size="mini"
+              type="text"
+              @click="handleLook(scope.row)"
+              >查看
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-no-more-click
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['iscs:machinery:edit']"
+              >编辑
+            </el-button>
+            <el-button
+              v-no-more-click
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['iscs:machinery:remove']"
+              >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- LOTO站 -->
+    <div class="loto"></div>
+    <!-- SOP列表 -->
+    <div class="sopList" v-if="this.tabPosition == 'sopList'">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['iscs:machinery:add']"
+            >新增
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="danger"
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['mes:hw:information:batchremove']"
+            >批量删除</el-button
+          >
+        </el-col>
+        <!-- <el-col :span="1.5">
+          <el-button
+            v-no-more-click
+            type="info"
+            plain
+            icon="el-icon-sort"
+            size="mini"
+            @click="toggleExpandAll"
+            >展开/折叠
+          </el-button>
+        </el-col> -->
+        <right-toolbar
+          :showSearch.sync="showSearch"
+          @queryTable="getList"
+        ></right-toolbar>
+      </el-row>
+
+      <el-table
+        v-if="refreshTable"
+        v-loading="loading"
+        :data="deptList"
+        row-key="machineryId"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+
+        <el-table-column
+          prop="machineryName"
+          label="岗位设备名称"
+        ></el-table-column>
+        <el-table-column
+          prop="machineryName"
+          label="工作内容"
+        ></el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-no-more-click
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['iscs:machinery:edit']"
+              >编辑
+            </el-button>
+            <!-- <el-button
+                v-no-more-click
+                size="mini"
+                type="text"
+                icon="el-icon-plus"
+                @click="handleAdd(scope.row)"
+                v-hasPermi="['iscs:machinery:add']"
+                >新增
+              </el-button> -->
+            <!--          v-if="scope.row.parentId != 0"-->
+            <el-button
+              v-no-more-click
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['iscs:machinery:remove']"
+              >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="上级" prop="parentId">
+          <treeselect
+            v-model="form.parentId"
+            :options="machineryOptions"
+            :normalizer="normalizer"
+            placeholder="选择上级"
+          />
+        </el-form-item>
+
+        <el-form-item label="设备/工艺名称" prop="machineryName">
+          <el-input
+            v-model="form.machineryName"
+            placeholder="请输入设备/工艺名称"
+          />
+        </el-form-item>
+        <el-row>
+          <el-col :span="18">
+            <el-form-item label="设备/工艺编号" prop="machineryCode">
+              <el-input
+                v-model="form.machineryCode"
+                placeholder="请输入设备/工艺编号"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="30">
+              <el-switch
+                v-model="autoGenFlag"
+                active-color="#13ce66"
+                active-text="自动生成"
+                @change="handleAutoGenChange(autoGenFlag)"
+              >
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="所属mars岗位" prop="workstationId">
+          <treeselect
+            v-model="form.workstationId"
+            :options="marsOptions"
+            :normalizer="Marsnormalizer"
+            placeholder="选择mars岗位"
+          />
+        </el-form-item>
+        <el-form-item label="所属电柜" prop="lotoId">
+          <el-select
+            style="width: 300px"
+            v-model="form.lotoId"
+            placeholder="请选择所属电柜"
+          >
+            <el-option
+              v-for="dict in LotoOptions"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备/工艺类型" prop="machineryType">
+          <el-input
+            v-model="form.machineryType"
+            placeholder="请输入设备/工艺类型"
+          />
+        </el-form-item>
+
+        <el-form-item label="工艺图" prop="machineryImg">
+          <ImageUploadSingle
+            :limit="1"
+            :value="form.machineryImg"
+            :fileSize="5"
+            @onUploaded="handleIconUplaoded"
+            @onRemoved="handleIconRemoved"
+          ></ImageUploadSingle>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button v-no-more-click type="primary" @click="submitForm"
+          >确 定</el-button
+        >
+        <el-button v-no-more-click @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listTechnology,
+  addTechnology,
+  updateTechnology,
+  delTechnology,
+  getTechnologyInfo,
+} from "@/api/system/machinery";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { genCode } from "@/api/system/autocode/rule";
+import { listMarsDept } from "@/api/system/marsdept";
+import { listLoto } from "@/api/mes/lotoStation/lotoStation";
+
+export default {
+  name: "Dept",
+  dicts: ["sys_normal_disable"],
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      //自动生成编码
+      autoGenFlag: false,
+      tabPosition: "deviceList",
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 表格树数据
+      deptList: [],
+      // mars树选项
+      marsOptions: [],
+      //工艺树
+      machineryOptions: [],
+      // 电柜
+      lotoOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        pages: 1,
+        size: -1,
+        machineryName: undefined,
+        machineryCode: undefined,
+      },
+      LotoOptions: [], //电柜绑定
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        machineryCode: [
+          { required: true, message: "设备/工艺编码不能为空", trigger: "blur" },
+        ],
+        machineryName: [
+          { required: true, message: "设备/工艺名称不能为空", trigger: "blur" },
+        ],
+        workstationId: [
+          { required: true, message: "岗位不能为空", trigger: "blur" },
+        ],
+        lotoId: [{ required: true, message: "电柜不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  watch: {
+    "form.workstationId": function (newVal, oldVal) {
+      if (newVal) {
+        const data = {
+          pasge: 1,
+          size: -1,
+          workstationId: this.form.workstationId,
+        };
+        listLoto(data).then((response) => {
+          this.LotoOptions = response.data.records.map((item) => {
+            return {
+              value: item.lotoId,
+              label: item.lotoName,
+            };
+          });
+        });
+      }
+    },
+    // 监听 tabPosition 的变化
+    tabPosition(newVal) {
+      if (newVal === "craftInformation") {
+        // 当 tabPosition 为 "craftInformation" 时跳转
+        this.$router.push("/technology/technologyList");
+      }
+    },
+  },
+  methods: {
+    /** 查询部门列表 */
+    getList() {
+      this.loading = true;
+      listTechnology(this.queryParams).then((response) => {
+        debugger;
+        this.deptList = this.handleTree(
+          response.data.records,
+          "machineryId",
+          "parentId"
+        );
+        this.machineryOptions = this.handleTree(
+          response.data.records,
+          "machineryId",
+          "parentId"
+        );
+        console.log(this.deptList, "设备/工艺列表");
+        this.loading = false;
+      });
+      const data = {
+        pasge: 1,
+        size: -1,
+      };
+      listMarsDept(data).then((response) => {
+        this.marsOptions = this.handleTree(
+          response.data.records,
+          "workstationId",
+          "parentId"
+        );
+      });
+      listLoto(data).then((response) => {
+        this.LotoOptions = response.data.records.map((item) => {
+          return {
+            value: item.lotoId,
+            label: item.lotoName,
+          };
+        });
+      });
+    },
+    /** 转换部门数据结构 */
+    Marsnormalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.workstationId,
+        label: node.workstationName,
+        children: node.children,
+      };
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.machineryId,
+        label: node.machineryName,
+        children: node.children,
+      };
+    },
+    // 地图预览
+    look(row) {
+      console.log(row, "row预览");
+      const data = row.lotoId;
+      this.$router.push(
+        `/system/technology/technologyList/index/MapData?lotoId=${data}&machineryId=${row.machineryId}`
+      );
+      // this.dialogVisibleMap = true; // 显示地图预览弹框
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        machineryId: undefined,
+        parentId: undefined,
+        machineryName: undefined,
+      };
+      this.autoGenFlag = false;
+      this.resetForm("form");
+    },
+    //自动生成编码
+    handleAutoGenChange(autoGenFlag) {
+      if (autoGenFlag) {
+        genCode("TECHNOLOGY_CODE").then((response) => {
+          console.log(response, "设备工艺编码");
+          this.form.machineryCode = response;
+        });
+      } else {
+        this.form.machineryCode = null;
+      }
+    },
+    //图标上传成功
+    handleIconUplaoded(imgUrl) {
+      this.form.machineryImg = imgUrl[0].url;
+    },
+    // 图标移除
+    handleIconRemoved(imgUrl) {
+      this.form.machineryImg = null;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      if (row != null && row.machineryId) {
+        this.form.parentId = row.machineryId;
+      } else {
+        this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加部门";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      getTechnologyInfo(row.machineryId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改部门";
+      });
+    },
+
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.machineryId != undefined) {
+            updateTechnology(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addTechnology(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.codes = selection.map((item) => item.machineryCode);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal
+        .confirm('是否确认删除名称为"' + row.machineryName + '"的数据项？')
+        .then(function () {
+          return delTechnology(row.machineryId);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style scoped>
+.app-container {
+  width: 100%;
+  height: 100%;
+}
+.left {
+  width: 15%;
+  height: 100%;
+  margin-right: 10px;
+  /* background: green; */
+}
+.deptTree {
+  width: 100%;
+  height: 90%;
+  /* background: pink; */
+}
+.right {
+  width: 83%;
+  height: 100%;
+  /* background: yellow; */
+}
+</style>

src/views/system/technology/technologyList/index.vue

@@ -13,7 +13,7 @@
     <div class="right">
       <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
         <el-radio-button label="craft">工艺</el-radio-button>
-        <el-radio-button label="equipment">设备</el-radio-button>
+        <el-radio-button label="device">设备</el-radio-button>
       </el-radio-group>
       <!-- 工艺 -->
       <div class="craft" v-if="this.tabPosition == 'craft'">
@@ -166,7 +166,7 @@
         </el-table>
       </div>
       <!-- 设备 -->
-      <div class="equipment" v-if="this.tabPosition !== 'craft'">
+      <div class="device" v-if="this.tabPosition !== 'craft'">
         <el-form
           :model="queryParams"
           ref="queryForm"
@@ -429,6 +429,8 @@ export default {
       //自动生成编码
       autoGenFlag: false,
       tabPosition: "craft",
+      // 非多个禁用
+      multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 表格树数据
@@ -635,6 +637,16 @@ export default {
         this.title = "修改部门";
       });
     },
+    handleLook() {
+      // 工艺详情
+      if (this.tabPosition == "craft") {
+        this.$router.push("/system/technology/technologyDetail/craftDetail");
+      } else {
+        // 设备详情
+        this.$router.push("/system/technology/technologyDetail/deviceDetail");
+      }
+    },
+
     /** 提交按钮 */
     submitForm: function () {
       this.$refs["form"].validate((valid) => {