mes

package.json

@@ -62,4 +62,4 @@
     "vue-template-compiler": "^2.7.10",
     "webpack": "^5.74.0"
   }
-}
+}

src/api/mes/index.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request';
+import { setToken } from '@/utils/token-util';
+
+/**
+ * 登录
+ */
+export async function login(data) {
+  const res = await request.post('/main/user/login', data);
+  if (res.data.code == 0) {
+    setToken(res.data.data.token, data.remember);
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取验证码
+ */
+export async function getCaptcha() {
+  const res = await request.get('/captcha');
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/components/header-title/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="divider">
+    <div class="title">
+      <div class="ele-bg-primary"></div>
+      <span :style="{ 'font-size': size }">{{ title }}</span>
+    </div>
+    <div class="ele-bg-primary" style="width: 100%; height: 2px"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      title: {
+        typeof: String,
+        default: '信息'
+      },
+      size: {
+        typeof: String,
+        default: '20px'
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .divider {
+    margin-bottom: 20px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      div {
+        width: 8px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      span {
+        font-size: 20px;
+      }
+    }
+  }
+</style>

src/main.js

@@ -9,6 +9,8 @@ import VueClipboard from 'vue-clipboard2';
 import i18n from './i18n';
 import './styles/index.scss';
 import DictSelection from '@/components/Dict/DictSelection';
+import HeaderTitle from '@/components/header-title';
+Vue.component('HeaderTitle', HeaderTitle);
 
 // // register globally
 import '@/icons';

src/styles/index.scss

@@ -1,5 +1,5 @@
 /** 全局样式 */
 $--ele-font-path: '~ele-admin/es/style/fonts';
-// @import '~ele-admin/es/style/themes/dynamic.scss';
-// @import '~ele-admin/es/style/index.scss';
+@import '~ele-admin/es/style/themes/dynamic.scss';
+@import '~ele-admin/es/style/index.scss';
 @import './transition/index.scss';

src/views/login/index.vue

@@ -115,7 +115,7 @@
     // eslint-disable-next-line vue/multi-word-component-names
     name: 'Login',
     components: { I18nIcon },
-    data () {
+    data() {
       return {
         // 登录框方向, 0居中, 1居右, 2居左
         direction: 0,
@@ -123,7 +123,7 @@
         loading: false,
         // 表单数据
         form: {
-          loginName: 'aaa',
+          loginName: 'mes111',
           loginPwd: '123456',
           remember: true
         },
@@ -135,7 +135,7 @@
     },
     computed: {
       // 表单验证规则
-      rules () {
+      rules() {
         return {
           loginName: [
             {
@@ -156,7 +156,7 @@
         };
       }
     },
-    created () {
+    created() {
       if (getToken()) {
         this.goHome();
       } else {
@@ -166,7 +166,7 @@
     },
     methods: {
       /* 提交 */
-      submit () {
+      submit() {
         this.$refs.form.validate((valid) => {
           if (!valid) {
             return false;
@@ -188,11 +188,11 @@
         });
       },
       /* 跳转到首页 */
-      goHome () {
+      goHome() {
         this.$router.push(this.$route?.query?.from ?? '/').catch(() => {});
       },
       /* 更换图形验证码 */
-      changeCaptcha () {
+      changeCaptcha() {
         // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
         getCaptcha()
           .then((data) => {

src/views/mes/workOrder/components/order-search.vue

@@ -0,0 +1,186 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="下达日期开始:" label-width="100px">
+          <el-date-picker
+            v-model="where.taskDueAfter"
+            value-format="yyyy-MM-dd"
+            placeholder="下达日期开始"
+            type="date"
+            style="width: 200px"
+            class="filter-item"
+          ></el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="下单日期结束" label-width="100px">
+          <el-date-picker
+            v-model="where.taskDueBefore"
+            value-format="yyyy-MM-dd"
+            placeholder="下单日期结束"
+            type="date"
+            style="width: 200px"
+            class="filter-item"
+          ></el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="创建时间开始" label-width="100px">
+          <el-date-picker
+            v-model="where.taskDueBefore"
+            value-format="yyyy-MM-dd"
+            placeholder="创建时间开始"
+            type="date"
+            style="width: 200px"
+            class="filter-item"
+          ></el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="创建时间结束" label-width="100px">
+          <el-date-picker
+            v-model="where.taskDueBefore"
+            value-format="yyyy-MM-dd"
+            placeholder="创建时间结束"
+            type="date"
+            style="width: 200px"
+            class="filter-item"
+          ></el-date-picker>
+        </el-form-item>
+      </el-col>
+
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="计划编号" label-width="77px">
+          <el-input clearable v-model="where.taskName" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="产品编码" label-width="77px">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="牌号" label-width="77px">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="型号" label-width="77px">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="班组" label-width="77px">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="客户范围" label-width="77px">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="工单号" label-width="77px">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="计划类型" label-width="77px">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col
+        v-bind="styleResponsive ? { lg: 16, md: 12 } : { span: 6 }"
+        style="text-align: right"
+      >
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        taskName: undefined,
+        processInstanceBusinessKey: undefined,
+        taskDueAfter: undefined,
+        taskDueBefore: undefined
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>
+<style scoped>
+  div {
+    text-align: ;
+  }
+</style>

src/views/mes/workOrder/components/send-order.vue

@@ -0,0 +1,496 @@
+<!-- 字典编辑弹窗 -->
+<template>
+  <ele-modal
+    width="960px"
+    :maxable="true"
+    :visible="visible"
+    :close-on-click-modal="true"
+    title="派单"
+    @update:visible="updateVisible"
+  >
+    <HeaderTitle title="选择生产设备" size="16px"></HeaderTitle>
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="85px"
+      style="margin-bottom: 10px"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="字典名称:" prop="name">
+            <el-select
+              v-model="form.name"
+              placeholder="请选择"
+              @change="OneChange(1)"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="字典值:" prop="code">
+            <el-select
+              v-model="form.name1"
+              placeholder="请选择"
+              @change="OneChange(2)"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.label"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="应用类型:" prop="appType">
+            <el-select v-model="form.name2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.name"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <HeaderTitle title="生产基本信息" size="16px"></HeaderTitle>
+
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="110px"
+      style="margin-bottom: 10px"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="产品分类:"> 1111 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="生产版本:"> 2222 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="交货日期:"> 3333 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="产品牌号:"> 3333 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="产品型号:"> 3333 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="生产数量:"> 3333 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="物料(产品)编码:"> 3333 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="物料(产品)名称:"> 3333 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="生产工单号:"> 3333 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="销售单号:"> 3333 </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="计划单号:"> 3333 </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <HeaderTitle title="当班人员信息" size="16px"></HeaderTitle>
+
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column prop="code" label="字典项编码">
+        <template slot-scope="scope">
+          <el-input
+            @blur="checkedValue(scope.row.code)"
+            v-model="scope.row.code"
+            placeholder=""
+          ></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="字典项名称">
+        <template slot-scope="scope">
+          <el-input v-model="scope.row.name" placeholder=""></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序">
+        <template slot-scope="scope">
+          <el-input
+            v-model="scope.row.sort"
+            @input="
+              scope.row.sort = String(scope.row.sort).replace(/[^\d]/g, '')
+            "
+          ></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column prop="enable" label="启用">
+        <template slot-scope="scope">
+          <el-radio-group v-model="scope.row.enable">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template slot-scope="scope">
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此字典项吗？"
+            @confirm="removeArr(scope)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { addDictionary, updateDictionary } from '@/api/system/dictionary';
+  import {
+    pageDictionaryData,
+    removeDictionaryData,
+    removeDictionaryDataBatch
+  } from '@/api/system/dictionary-data';
+
+  export default {
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 修改回显的数据
+      id: String | Number
+    },
+    data() {
+      const defaultForm = {
+        name: '',
+        name1: '',
+        name2: '',
+        code: '',
+        appType: 1,
+        enable: 1,
+        remark: '',
+        dictStaticSubmitPOList: []
+      };
+      return {
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // form: {
+        //   name: '',
+        //   code: '',
+        //   appType: 1,
+        //   enable: 1,
+        //   remark: ''
+        // },
+        // 表单验证规则
+        rules: {
+          name: [
+            {
+              required: true,
+              message: '请输入字典名称',
+              trigger: 'blur'
+            }
+          ],
+          code: [
+            {
+              required: true,
+              message: '请输入字典值',
+              trigger: 'blur'
+            }
+          ],
+          appType: [
+            {
+              required: true,
+              message: '请选择应用类型',
+              trigger: 'blur'
+            }
+          ],
+          enable: [
+            {
+              required: true,
+              message: '请选择是否启用',
+              trigger: 'blur'
+            }
+          ],
+          sort: [
+            {
+              required: true,
+              message: '请输入排序号',
+              trigger: 'blur'
+            }
+          ]
+        },
+        options: [
+          { value: 1, label: '车间1', name: 11 },
+          { value: 2, label: '车间2', name: 12 },
+          { value: 3, label: '车间3', name: 13 },
+          { value: 4, label: '车间4', name: 14 }
+        ],
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'selection',
+            type: 'selection',
+            width: 45,
+            align: 'center'
+          },
+          {
+            columnKey: 'index',
+            type: 'index',
+            width: 45,
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'code',
+            label: '字典编码',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: '字典名称',
+
+            showOverflowTooltip: true
+          },
+          // {
+          //   prop: 'appType',
+          //   label: '字典类型',
+
+          //   showOverflowTooltip: true,
+          //   minWidth: 110
+          // },
+          {
+            prop: 'appType',
+            label: '应用类型',
+
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'remark',
+            label: '描述',
+
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+
+            showOverflowTooltip: true,
+            minWidth: 110,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 130,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+        tableData: [],
+        // 表格选中数据
+        selection: [],
+        datasource: {
+          list: []
+        },
+        // 提交状态
+        loading: false,
+        // 是否是修改
+        isUpdate: false,
+        delectId: 1
+      };
+    },
+    created() {},
+
+    methods: {
+      OneChange(val) {
+        if (val == 1) {
+          this.form.name1 = '';
+          this.form.name2 = '';
+        } else if (val == 2) {
+          this.form.name2 = '';
+        }
+      },
+      pushArr() {
+        this.form.dictStaticSubmitPOList.push({
+          code: '',
+          enable: 1,
+          name: '',
+          sort: '',
+          delectId: this.delectId
+        });
+        this.delectId = this.delectId + 1;
+        this.filterArr();
+      },
+      //
+      checkedValue(val) {
+        console.log(val);
+      },
+      removeArr(row) {
+        console.log(row);
+        if (row.row.id) {
+          this.form.dictStaticSubmitPOList.forEach((item) => {
+            if (item.id === row.row.id) {
+              item.deleted = 1;
+            }
+          });
+          this.filterArr();
+        } else {
+          let index = this.form.dictStaticSubmitPOList.findIndex(
+            (item) => item.delectId === row.row.delectId
+          );
+          console.log(index);
+          this.form.dictStaticSubmitPOList.splice(index, 1); // 在数组的指定位置移除对应的元素。 返回移除的
+          this.filterArr();
+        }
+
+        // let falg = this.form.dictStaticSubmitPOList[row.$index].deleted === 0;
+        // if (falg) {
+        //   this.form.dictStaticSubmitPOList[row.$index].deleted = 1;
+        //   this.filterArr();
+        // } else {
+        //   this.form.dictStaticSubmitPOList.splice(row.$index, 1);
+        //   this.filterArr();
+        // }
+      },
+      handleSelectionChange() {},
+      /* 保存编辑 */
+      save() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          let falg = this.form.dictStaticSubmitPOList.some(
+            (item, index) => item.code.length === 0
+          );
+          if (falg) {
+            this.$message({
+              message: '字典项编码不能为空',
+              type: 'warning'
+            });
+            return;
+          }
+          this.form.dictStaticSubmitPOList.forEach((item, index) => {
+            if (item.delectId) {
+              delete item.delectId;
+            }
+          });
+
+          this.loading = true;
+          const saveOrUpdate = this.isUpdate ? updateDictionary : addDictionary;
+          saveOrUpdate(this.form)
+            .then((msg) => {
+              this.loading = false;
+              this.$message.success(msg);
+              this.updateVisible(false);
+              this.$emit('done');
+            })
+            .catch((e) => {
+              this.loading = false;
+              // // this.$message.error(e.message);
+            });
+        });
+      },
+      filterArr() {
+        this.tableData = this.form.dictStaticSubmitPOList.filter(
+          (item) => item.deleted !== 1
+        );
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      },
+
+      getDetail() {
+        //   const res = await pageDictionaryData(this.id);
+        //   this.form = res.data.dictInfoVO;
+        //   this.form.dictStaticSubmitPOList = res.data.dictStaticVOList;
+        //   if (this.form.dictStaticSubmitPOList.length > 0) {
+        //     this.filterArr();
+        //   } else {
+        //     this.tableTata = [];
+        //   }
+      }
+    },
+    watch: {
+      visible(visible) {
+        if (visible) {
+          if (this.id) {
+            // this.$util.assignObject(this.form, this.data);
+            this.isUpdate = true;
+            this.getDetail();
+          } else {
+            this.isUpdate = false;
+          }
+        } else {
+          this.$refs.form.clearValidate();
+          this.form = { ...this.defaultForm };
+          this.form.dictStaticSubmitPOList = []; // clear the list of the dictionary static push button. 描述变化的字段不会在push后
+          this.tableData = []; // clear the list of the dictionary static push button. 描述变化的字段不会在push后。
+        }
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .divider {
+    margin-bottom: 20px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      .ele-bg-primary {
+        width: 8px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      .action {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+      }
+      span {
+        font-size: 20px;
+      }
+    }
+  }
+</style>

src/views/mes/workOrder/detail/d-basic.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="ele-body">
+    <div class="d-basic-item">
+      <HeaderTitle title="生产基本信息" size="16px"></HeaderTitle>
+      <el-form label-width="120px">
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="d-basic-item">
+      <HeaderTitle title="工艺路线" size="16px"></HeaderTitle>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :toolbar="false"
+        :datasource="datasource"
+        :needPage="false"
+        cache-key="dBasicTable"
+      >
+        <!-- 表头工具栏 -->
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </div>
+    <div class="d-basic-item">
+      <HeaderTitle title="物料需求" size="16px"></HeaderTitle>
+      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
+        <el-radio-button label="top">原料</el-radio-button>
+        <el-radio-button label="right">模具</el-radio-button>
+        <el-radio-button label="bottom">舟皿</el-radio-button>
+        <el-radio-button label="left">周转车</el-radio-button>
+      </el-radio-group>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :toolbar="false"
+        :datasource="datasource"
+        :needPage="false"
+        cache-key="dBasicTable"
+      >
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </div>
+    <div class="d-basic-item">
+      <HeaderTitle title="设备需求" size="16px"></HeaderTitle>
+      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
+        <el-radio-button label="top">挤压成型</el-radio-button>
+        <el-radio-button label="right">自然干燥</el-radio-button>
+        <el-radio-button label="bottom">升温干燥</el-radio-button>
+        <el-radio-button label="left">半加定长</el-radio-button>
+      </el-radio-group>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :toolbar="false"
+        :datasource="datasource"
+        :needPage="false"
+        cache-key="dBasicTable"
+      >
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </div>
+    <div class="d-basic-item">
+      <HeaderTitle title="当班人员信息" size="16px"></HeaderTitle>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :toolbar="false"
+        :datasource="datasource"
+        :needPage="false"
+        cache-key="dBasicTable"
+      >
+        <!-- 表头工具栏 -->
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </div>
+  </div>
+</template>
+
+<script>
+  import dTable from '@/views/mes/workOrder/detail/d-table';
+
+  export default {
+    components: {
+      dTable
+    },
+    data() {
+      return {
+        columns: [],
+        tabPosition: 'top'
+      };
+    },
+    methods: {
+      datasource() {
+        return {
+          list: []
+        };
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .el-form-item {
+    font-size: 12px !important;
+    margin-bottom: 10px;
+  }
+  .d-basic-item {
+    margin-bottom: 30px;
+  }
+  .el-radio-button {
+  }
+</style>

src/views/mes/workOrder/detail/d-table.vue

@@ -0,0 +1,73 @@
+<template>
+  <ele-modal
+    width="960px"
+    :maxable="true"
+    :visible="visible"
+    :close-on-click-modal="true"
+    title="派单"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="table"
+      :columns="columns"
+      :toolbar="false"
+      :datasource="datasource"
+      :needPage="false"
+      cache-key="dTrackTable3"
+    >
+      <!-- 表头工具栏 -->
+
+      <!-- 操作列 -->
+      <template v-slot:action="{ row }">
+        <!-- <el-link type="primary" :underline="false" @click="SendOrders(row)">
+          派单
+        </el-link>
+        <el-link
+          type="primary"
+          :underline="false"
+          icon="el-icon-view"
+          @click="btnView(row)"
+        >
+          查看详情
+        </el-link> -->
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script>
+  export default {
+    props: {
+      visible: {
+        typeof: Boolean,
+        default: false
+      },
+      title: {
+        typeof: String,
+        default: '派单'
+        // require: true
+      },
+      width: {
+        typeof: String,
+        default: '960px'
+      }
+    },
+    data() {
+      return {
+        columns: []
+      };
+    },
+    methods: {
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      },
+      datasource() {
+        return {
+          list: []
+        };
+      }
+    }
+  };
+</script>
+
+<style></style>

src/views/mes/workOrder/detail/d-track.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="ele-body">
+    <div class="d-track-item">
+      <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
+      <el-form label-width="120px">
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品分类"> </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="d-track-item">
+      <HeaderTitle title="报工明细" size="16px"></HeaderTitle>
+      <el-row style="margin-bottom: 20px; border: 2px solid #f2f2f2">
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">本次报工累计良品数量</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">本次报工累计良品数量</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">本次报工累计良品数量</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">本次报工累计良品数量</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">本次报工累计良品数量</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">本次报工累计良品数量</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+      </el-row>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :toolbar="false"
+        :datasource="datasource"
+        :needPage="false"
+        cache-key="dTrackTable4"
+      >
+        <!-- 表头工具栏 -->
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </div>
+    <div class="d-track-item">
+      <HeaderTitle title="领料记录" size="16px"></HeaderTitle>
+      <el-row style="margin-bottom: 20px; border: 2px solid #f2f2f2">
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :toolbar="false"
+        :datasource="datasource"
+        :needPage="false"
+        cache-key="dTrackTable1"
+      >
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </div>
+    <div class="d-track-item" @click="dialogTableVisible = true">
+      <HeaderTitle title="工单交接记录" size="16px"></HeaderTitle>
+
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :toolbar="false"
+        :datasource="datasource"
+        :needPage="false"
+        cache-key="dTrackTable2"
+      >
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </div>
+    <div class="d-track-item">
+      <HeaderTitle title="退料记录" size="16px"></HeaderTitle>
+      <el-row style="margin-bottom: 20px; border: 2px solid #f2f2f2">
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="d-track-item-inner">
+            <div class="label">领料单号</div>
+            <div class="value">10</div>
+          </div>
+        </el-col>
+      </el-row>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :toolbar="false"
+        :datasource="datasource"
+        :needPage="false"
+        cache-key="dTrackTable3"
+      >
+        <!-- 表头工具栏 -->
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </div>
+    <dTable v-if="dialogTableVisible" :visible.sync="dialogTableVisible" />
+  </div>
+</template>
+
+<script>
+  import dTable from '@/views/mes/workOrder/detail/d-table';
+  export default {
+    components: {
+      dTable
+    },
+    data() {
+      return {
+        columns: [],
+        dialogTableVisible: false,
+        tabPosition: 'top'
+      };
+    },
+    methods: {
+      datasource() {
+        return {
+          list: []
+        };
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .el-form-item {
+    font-size: 12px !important;
+    margin-bottom: 10px;
+  }
+  .d-track-item {
+    margin-bottom: 30px;
+  }
+  .d-track-item-inner {
+    display: flex;
+    align-items: center;
+    .label {
+      padding: 5px 20px;
+      background-color: #f2f2f2;
+      color: #333;
+    }
+  }
+  .el-radio-button {
+  }
+</style>

src/views/mes/workOrder/detail/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div slot="header"><span>工单号</span>5555555555555555</div>
+      <el-form label-width="90px">
+        <el-row :gutter="15">
+          <el-col :span="4">
+            <el-form-item label="产品编码"> 1111 </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="产品编码"> 1111 </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="产品编码"> 1111 </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="下单时间"> 1111 </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="创建时间"> 1111 </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-tabs
+        v-model="activeTabName"
+        @tab-click="handleClick"
+        class="detail_tabs"
+      >
+        <el-tab-pane label="基本信息" name="basic">
+          <dBasic />
+        </el-tab-pane>
+        <el-tab-pane label="执行跟踪" name="track">
+          <dTrack />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import dBasic from '@/views/mes/workOrder/detail/d-basic';
+  import dTrack from '@/views/mes/workOrder/detail/d-track';
+  export default {
+    components: {
+      dBasic,
+      dTrack
+    },
+    data() {
+      return {
+        activeTabName: 'basic'
+      };
+    },
+
+    methods: {
+      handleClick() {
+        this.$nextTick(() => {
+          const dom = document.querySelector('.detail_tabs .el-tabs__content');
+          dom.scrollTop = 0;
+        });
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ele-body {
+    .el-card__header {
+      span {
+        font-size: 16px;
+        font-weight: 700;
+        margin-right: 20px;
+      }
+    }
+
+    .el-tabs {
+      :deep(.el-tabs__nav-scroll) {
+        padding-left: 20px !important;
+        background-color: #f2f1f1;
+      }
+      :deep(.el-tabs__item) {
+        font-size: 16px;
+        color: #333;
+        font-weight: 700;
+      }
+      :deep(.el-tabs__content) {
+        height: calc(100vh - 320px);
+        overflow-y: auto;
+      }
+      // :deep(.el-tabs__item.is-active) {
+      //   background-color: #fff !important;
+      // }
+      // :deep(.el-tabs__active-bar) {
+      //   display: none;
+      // }
+    }
+  }
+</style>

src/views/mes/workOrder/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <order-search @search="reload" />
+
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            icon="el-icon-refresh"
+            type="primary"
+            @click="btnView"
+            class="ele-btn-icon"
+            >获取最新工单
+          </el-button>
+        </template>
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="SendOrders(row)">
+            派单
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(row)"
+          >
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </el-card>
+
+    <!-- 执行任务 -->
+    <SendOrders
+      v-if="dialogOrderView"
+      :visible.sync="dialogOrderView"
+    ></SendOrders>
+    <process-detail
+      v-if="dialogViewVisible"
+      :visible.sync="dialogViewVisible"
+      :processInstanceId="processInstanceId"
+    ></process-detail>
+  </div>
+</template>
+
+<script>
+  import {} from '@/api/mes';
+  import OrderSearch from './components/order-search.vue';
+  import { Message } from 'element-ui';
+  import SendOrders from './components/send-order.vue';
+
+  export default {
+    name: 'FlowableTaskTodo',
+    components: {
+      OrderSearch,
+      SendOrders
+    },
+    data() {
+      return {
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            width: 50,
+            align: 'center',
+            fixed: 'left'
+          },
+
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            width: 300,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            width: 300,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            width: 300,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            width: 300,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            width: 300,
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'name',
+            label: '任务名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'dueDate',
+            label: '到期日期',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'owner',
+            label: '所有人',
+            align: 'center',
+
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'assignee',
+            label: '执行人',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'assignee1',
+            label: '执行状态',
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'right'
+          },
+
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 230,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            fixed: 'right',
+
+            showOverflowTooltip: true
+          }
+        ],
+
+        listQuery: {
+          taskName: undefined,
+          processInstanceBusinessKey: undefined,
+          taskDueAfter: undefined,
+          taskDueBefore: undefined
+        },
+        dialogOrderView: false,
+        formJson: undefined,
+        executeTaskId: '',
+        processInstanceId: '',
+        dialogViewVisible: false
+      };
+    },
+
+    methods: {
+      async datasource({ page, limit, where }) {
+        const res = await getAction('/flowable/task/listTodo', {
+          ...where,
+          current: page,
+          size: limit
+        });
+        const { data } = res.data;
+        return {
+          list: data.records,
+          count: data.total
+        };
+      },
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where });
+      },
+
+      btnQuery() {
+        this.reload();
+      },
+      btnReset() {
+        this.listQuery = {
+          taskName: undefined,
+          processInstanceBusinessKey: undefined,
+          taskDueAfter: undefined,
+          taskDueBefore: undefined
+        };
+        this.reload();
+      },
+
+      SendOrders(row) {
+        // this.processInstanceId = row.id;
+        this.dialogOrderView = true;
+      },
+      btnView(row) {
+        this.$router.push({
+          path: '/mes/workOrder/detail'
+        });
+      }
+    }
+  };
+</script>