入库管理流程

package.json

@@ -49,8 +49,8 @@
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "^3.9.1",

src/api/mbsys/assetstat.js

@@ -0,0 +1,20 @@
+/**
+ * 供水优化调度修相关接口
+ */
+import request from '@/utils/request'
+
+/**
+  * 说明：
+  * get和delete传值用params,
+  * post和put传值用data
+  */
+
+/**************调度计划***************/
+// 查询统计
+export function getStatistics(params) {
+  return request({
+    url: '/tofly-flow/assets/statistics',
+    method: 'get',
+    params
+  })
+}

src/api/mbsys/watersupply.js

@@ -152,4 +152,58 @@ export function getEmergencyStaff(params) {
     method: 'get',
     params
   })
+}
+
+// 获取应急物资
+export function emergencymaterial(params) {
+  return request({
+    url: '/tofly-flow/emergencymaterial/page',
+    method: 'get',
+    params
+  })
+}
+
+// 获取应急设施
+export function emergencyfacilities(params) {
+  return request({
+    url: '/tofly-flow/emergencyfacilities/list',
+    method: 'get',
+    params
+  })
+}
+
+// 获取应急预案列表
+export function emergencyList(params) {
+  return request({
+    url: '/tofly-flow/emergency/list',
+    method: 'get',
+    params
+  })
+}
+
+// 移除应急预案
+export function deleteEmergency(data) {
+  return request({
+    url: '/tofly-flow/emergency',
+    method: 'delete',
+    data
+  })
+}
+
+// 所有危险源
+export function getHazardAll(data) {
+  return request({
+    url: '/tofly-flow/hazard/all',
+    method: 'post',
+    data
+  })
+}
+
+// 根据id获取应急预案
+export function getEmergencyById(params) {
+  return request({
+    url: '/tofly-flow/emergency/get',
+    method: 'get',
+    params
+  })
 }

src/router/_import.js

@@ -300,6 +300,14 @@ const map = {
   purchaseSupervise:()=>import('@/views/mbsys/materialmanage/processMng/purchaseSupervise/index.vue'), // 采购督办
   myPurchaseOrder:()=>import('@/views/mbsys/materialmanage/processMng/myPurchaseOrder/index.vue'), // 我的采购单
 
+  stockmanage:()=>import('@/views/mbsys/materialmanage/inventorymanage/stockmanage/index.vue'), // 入库管理
+  suppliesapply:()=>import('@/views/mbsys/materialmanage/inventorymanage/suppliesapply/index.vue'), // 物资申请
+  materialsout:()=>import('@/views/mbsys/materialmanage/inventorymanage/materialsout/index.vue'), // 出库管理
+  materialsputin:()=>import('@/views/mbsys/materialmanage/inventorymanage/materialsputin/index.vue'), // 入库管理
+
+  putinregister:()=>import('@/views/mbsys/materialmanage/materialputinManage/purchaseRegist/index.vue'), // 入库登记
+  putindeal:()=>import('@/views/mbsys/materialmanage/materialputinManage/purchaseExamine/index.vue'), // 入库处理
+
   // 协同办公系统
   publicdocuments: () => import('@/views/mbsys/collaborative/documentmanage/publicdocuments/index.vue'), // 公共文档
   mydocuments: () => import('@/views/mbsys/collaborative/documentmanage/mydocuments/index.vue'), // 我的文档

src/views/mbsys/assetmanage/assetstat/index.vue

@@ -49,6 +49,7 @@
 
 <script>
 import { pieChart, barChart } from '@/views/mbsys/assetmanage/assetstat/assetstatCharts'
+import { getStatistics } from '@/api/mbsys/assetstat'
 export default {
   data() {
     return {
@@ -57,46 +58,95 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        pieChart({
-        title: '设备资产总览',
-        target: 'chart1-1',
-        radius: true,
-        graphic: true,
-        data: [
-          { value: 735, name: '新增失败资产' },
-          { value: 580, name: '报废设备资产' },
-          { value: 1048, name: '其他' }
-        ]
-      })
-      pieChart({
-        title: '按资产类型统计价值占比',
-        target: 'chart1-2',
-        data: [
-          { value: 1048, name: '房屋建筑' },
-          { value: 735, name: '机器设备' },
-          { value: 580, name: '管网' },
-          { value: 54, name: '办公设施' }
-        ]
-      })
-      pieChart({
-        title: '按管理部门统计价值占比',
-        target: 'chart1-3',
-        data: [
-          { value: 1048, name: '财务部' },
-          { value: 735, name: '管网运维部' },
-          { value: 580, name: '档案部' },
-          { value: 484, name: '水厂' }
-        ]
-      })
-      barChart({
-        target: 'chart2',
-        title: '设备资产类型统计',
-        xAxis: ['电脑', '洗衣机', '空调', '工程车', '办公用车', '探漏仪', '探测器', '打印机', '电磁流量计', '水泵', '净水机', '电热熔焊机'],
-      })
-      }, 200);
+    getStatistics().then(res => {
+      console.log('输出：统计', res)
+      if (res.code == 1) {
+        // 设备资产总览
+        let selectByDevice = res.result.selectByDevice.map(item => {
+          item['value'] = item.count
+          return item
+        })
+        // 按资产类型统计价值占比
+        let selectByType = res.result.selectByType.map(item => {
+          item['value'] = item.count
+          return item
+        })
+        // 按管理部门统计价值占比
+        let selectByDeptName = res.result.selectByDeptName.map(item => {
+          item['value'] = item.count
+          return item
+        })
+        this.$nextTick(() => {
+          setTimeout(() => {
+            pieChart({
+              title: '设备资产总览',
+              target: 'chart1-1',
+              radius: true,
+              graphic: true,
+              data: selectByDeptName
+            })
+            pieChart({
+              title: '按资产类型统计价值占比',
+              target: 'chart1-2',
+              data: selectByType
+            })
+            pieChart({
+              title: '按管理部门统计价值占比',
+              target: 'chart1-3',
+              data: selectByDeptName
+            })
+            barChart({
+              target: 'chart2',
+              title: '设备资产类型统计',
+              xAxis: ['电脑', '洗衣机', '空调', '工程车', '办公用车', '探漏仪', '探测器', '打印机', '电磁流量计', '水泵', '净水机', '电热熔焊机'],
+            })
+          }, 200);
+        })
+      }
     })
+    // this.$nextTick(() => {
+    //   setTimeout(() => {
+    //     pieChart({
+    //       title: '设备资产总览',
+    //       target: 'chart1-1',
+    //       radius: true,
+    //       graphic: true,
+    //       data: [
+    //         { value: 735, name: '新增失败资产' },
+    //         { value: 580, name: '报废设备资产' },
+    //         { value: 1048, name: '其他' }
+    //       ]
+    //     })
+    //     pieChart({
+    //       title: '按资产类型统计价值占比',
+    //       target: 'chart1-2',
+    //       data: [
+    //         { value: 1048, name: '房屋建筑' },
+    //         { value: 735, name: '机器设备' },
+    //         { value: 580, name: '管网' },
+    //         { value: 54, name: '办公设施' }
+    //       ]
+    //     })
+    //     pieChart({
+    //       title: '按管理部门统计价值占比',
+    //       target: 'chart1-3',
+    //       data: [
+    //         { value: 1048, name: '财务部' },
+    //         { value: 735, name: '管网运维部' },
+    //         { value: 580, name: '档案部' },
+    //         { value: 484, name: '水厂' }
+    //       ]
+    //     })
+    //     barChart({
+    //       target: 'chart2',
+    //       title: '设备资产类型统计',
+    //       xAxis: ['电脑', '洗衣机', '空调', '工程车', '办公用车', '探漏仪', '探测器', '打印机', '电磁流量计', '水泵', '净水机', '电热熔焊机'],
+    //     })
+    //   }, 200);
+    // })
+  },
+  methods: {
+
   }
 }
 </script>

src/views/mbsys/materialmanage/inventorymanage/materialsout/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      物资出库
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/mbsys/materialmanage/inventorymanage/materialsputin/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <!-- 入库管理 -->
+  <div class="content-container">
+    <div class="top">
+      <el-form ref="queryForm" :inline="true" :model="queryForm" label-width="auto" style="float:left">
+        <el-form-item label="工单编号">
+          <el-input v-model="queryForm.factoryName" size="small" placeholder="请输入工单编号" style="width:260px" clearable></el-input>
+          <el-button type="primary" icon="el-icon-search" size="small" @click="query()">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" icon="el-icon-plus" size="small" @click="dialogFormVisible=true;form={};readonly=false">添加</el-button>
+      <el-button type="danger" icon="el-icon-delete" size="small" @click="submitDelete">删除</el-button>
+    </div>
+    <div class="table-div">
+      <el-table :data="tableData" style="width: 100%" :style="{width: '100%'}" height="100%" border ref="table"
+                :header-cell-style="{background:'rgba(250,250,250)',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}">
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="">
+          <p class="empty-p">暂无数据</p>
+        </template>
+        <el-table-column type="selection" align="center"></el-table-column>
+        <el-table-column prop="factoryName" label="工单编号" align="center"></el-table-column>
+        <el-table-column prop="contacts" label="入库单号" align="center"></el-table-column>
+        <el-table-column prop="contactNumber" label="入库物资类型" align="center"></el-table-column>
+        <el-table-column prop="factoryNumbe" label="采购物资类型" align="center"></el-table-column>
+        <el-table-column prop="factoryNumbe" label="入库总价" align="center"></el-table-column>
+        <el-table-column prop="factoryNumbe" label="采购总价" align="center"></el-table-column>
+        <el-table-column prop="factoryNumbe" label="创建部门" align="center"></el-table-column>
+        <el-table-column prop="factoryNumbe" label="创建人" align="center"></el-table-column>
+        <el-table-column prop="factoryNumbe" label="创建时间" align="center"></el-table-column>
+        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{row}">
+            <el-button type="text" @click="dialogFormVisible=true;form=row;readonly=true;">详情</el-button>
+            <el-button type="text" style="color:#f40" @click="submitDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination :current-page="pagination.current" :page-sizes="[20, 30, 50, 100, 200]" :page-size="pagination.size"
+                   :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+
+    <!-- 详情 -->
+    <el-dialog title="物资详情" :visible.sync="dialogFormVisible" width="700px" @closed="$refs.form.clearValidate();">
+      <!-- 基本信息 -->
+      <el-form ref="form" :model="form" label-width="auto">
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="供应商名称" prop="factoryName" :rules="[{ required: true, message: '请输入供应商名称', trigger: 'blur' }]">
+              <el-input v-model="form.factoryName" size="small" placeholder="请输入供应商名称" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系人" prop="contacts" :rules="[{ required: true, message: '请输入联系人', trigger: 'blur' }]">
+              <el-input v-model="form.contacts" size="small" placeholder="请输入联系人" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="contactNumber" :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' },
+            {pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change'}]">
+              <el-input v-model="form.contactNumber" placeholder="请输入联系电话" size="small" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="企业信用代码">
+              <el-input v-model="form.factoryNumbe" placeholder="请输入企业信用代码" size="small" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="所在地址">
+              <el-input v-model="form.address" placeholder="请输入所在地址" size="small" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :autosize="{ minRows: 2, maxRows: 6}" size="small"
+                        :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item>
+              <el-button size="small" @click="dialogFormVisible = false">上传附件</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
+        <el-button v-if="!readonly" size="small" type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getSupplier, addSupplier, deleteSupplier } from '@/api/mbsys/materialmanage';
+export default {
+  data() {
+    return {
+      queryForm: {},
+      form: {},
+      tableData: [],
+      pagination: { current: 1, size: 20, total: 0 },
+      dialogFormVisible: false,
+      readonly: false
+    }
+  },
+  mounted() {
+    // this.getSupplier()
+  },
+  methods: {
+    /**
+     * 获取供应商
+     */
+    getSupplier() {
+      let params = JSON.parse(JSON.stringify(this.pagination))
+      Object.assign(params, this.queryForm)
+      getSupplier(params).then(res => {
+        this.tableData = res.result.records
+        this.pagination.total = res.result.total
+      })
+    },
+    /**
+     * 查询
+     */
+    query() {
+      this.pagination.current = 1
+      this.pagination.size = 20
+      this.getSupplier()
+    },
+    handleSizeChange(size) {
+      this.pagination.size = size
+      this.getSupplier()
+    },
+    handleCurrentChange(current) {
+      this.pagination.current = current
+      this.getSupplier()
+    },
+    /**
+     * 提交
+     */
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          addSupplier(this.form).then(res => {
+            if (res.code == 1) {
+              this.$message.success("新增供应商成功")
+              this.pagination.current = 1
+              this.pagination.size = 20
+              this.getSupplier()
+              this.dialogFormVisible = false
+            }
+          })
+        } else {
+          return false;
+        }
+      });
+    },
+    /**
+     * 删除
+     */
+    delete(ids) {
+      deleteSupplier({ ids: ids }).then(res => {
+        if (res.code == 1) {
+          this.$message.success("删除成功")
+          this.pagination.current = 1
+          this.pagination.size = 20
+          this.getSupplier()
+        }
+      })
+    },
+    /**
+     * 提交删除
+     */
+    submitDelete(row = null) {
+      this.$confirm('此操作将删除供应商, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (!row) {
+          this.delete(row.id.toString())
+        } else {
+          let selects = this.$refs.table.selection;
+          const ids = selects.map(item => {
+            return item.id
+          }).join(',')
+          this.delete(ids)
+        }
+      }).catch(() => { });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+
+  .top {
+    height: 33px;
+    margin-bottom: 10px;
+    text-align: right;
+
+    .el-form .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .upload-demo {
+      display: inline-block;
+    }
+  }
+
+  .table-div {
+    height: calc(100% - 95px);
+  }
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+}
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+.el-dialog__wrapper {
+  >>> .el-form-item {
+    margin-bottom: 15px !important;
+  }
+  .item-title {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 10px;
+    font-weight: 600;
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 5px;
+      height: 18px;
+      vertical-align: text-bottom;
+      background-color: #2d74e7;
+      margin-right: 5px;
+    }
+  }
+}
+</style>

src/views/mbsys/materialmanage/inventorymanage/stockmanage/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <!-- 供应商管理 -->
+  <div class="content-container">
+    <div class="top">
+      <el-form ref="queryForm" :inline="true" :model="queryForm" label-width="auto" style="float:left">
+        <el-form-item label="库房名称">
+          <el-input v-model="queryForm.factoryName" size="small" placeholder="请输入库房名称" style="width:260px" clearable></el-input>
+          <el-button type="primary" icon="el-icon-search" size="small" @click="query()">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" icon="el-icon-plus" size="small" @click="dialogFormVisible=true;form={};readonly=false">添加</el-button>
+      <el-button type="danger" icon="el-icon-delete" size="small" @click="submitDelete">删除</el-button>
+    </div>
+    <div class="table-div">
+      <el-table :data="tableData" style="width: 100%" :style="{width: '100%'}" height="100%" border ref="table"
+                :header-cell-style="{background:'rgba(250,250,250)',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}">
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="">
+          <p class="empty-p">暂无数据</p>
+        </template>
+        <el-table-column type="selection" align="center"></el-table-column>
+        <el-table-column label="序号" align="center">
+          <template slot-scope="scope">
+            <span>{{scope.$index+1}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="factoryName" label="库房名称" align="center"></el-table-column>
+        <el-table-column prop="contacts" label="所在位置" align="center"></el-table-column>
+        <el-table-column prop="contactNumber" label="库房管理员" align="center"></el-table-column>
+        <el-table-column prop="factoryNumbe" label="是否启用" align="center">
+          <template slot-scope="{row}">
+            <el-switch v-model="row.model" active-text="是" inactive-text="否"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{row}">
+            <el-button type="text" @click="dialogFormVisible=true;form=row;readonly=true;">详情</el-button>
+            <el-button type="text" style="color:#f40" @click="submitDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination :current-page="pagination.current" :page-sizes="[20, 30, 50, 100, 200]" :page-size="pagination.size"
+                   :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+
+    <!-- 详情 -->
+    <el-dialog title="物资详情" :visible.sync="dialogFormVisible" width="700px" @closed="$refs.form.clearValidate();">
+      <!-- 基本信息 -->
+      <el-form ref="form" :model="form" label-width="auto">
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="库房名称" prop="factoryName" :rules="[{ required: true, message: '请输入库房名称', trigger: 'blur' }]">
+              <el-input v-model="form.factoryName" size="small" placeholder="请输入库房名称" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="所在位置">
+              <el-input v-model="form.address" placeholder="请输入所在位置" size="small" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item label="联系电话" prop="contactNumber" :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' },
+            {pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change'}]">
+              <el-input v-model="form.contactNumber" placeholder="请输入联系电话" size="small" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item label="库房管理员">
+              <el-input v-model="form.factoryNumbe" placeholder="请输入库房管理员" size="small" :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :autosize="{ minRows: 2, maxRows: 6}" size="small"
+                        :readonly="readonly"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="是否启用">
+              <el-switch v-model="form.model" active-text="是" inactive-text="否"></el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
+        <el-button v-if="!readonly" size="small" type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getSupplier, addSupplier, deleteSupplier } from '@/api/mbsys/materialmanage';
+export default {
+  data() {
+    return {
+      queryForm: {},
+      form: {},
+      tableData: [],
+      pagination: { current: 1, size: 20, total: 0 },
+      dialogFormVisible: false,
+      readonly: false
+    }
+  },
+  mounted() {
+    // this.getSupplier()
+  },
+  methods: {
+    /**
+     * 获取供应商
+     */
+    getSupplier() {
+      let params = JSON.parse(JSON.stringify(this.pagination))
+      Object.assign(params, this.queryForm)
+      getSupplier(params).then(res => {
+        this.tableData = res.result.records
+        this.pagination.total = res.result.total
+      })
+    },
+    /**
+     * 查询
+     */
+    query() {
+      this.pagination.current = 1
+      this.pagination.size = 20
+      this.getSupplier()
+    },
+    handleSizeChange(size) {
+      this.pagination.size = size
+      this.getSupplier()
+    },
+    handleCurrentChange(current) {
+      this.pagination.current = current
+      this.getSupplier()
+    },
+    /**
+     * 提交
+     */
+    submit() {
+      return
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          addSupplier(this.form).then(res => {
+            if (res.code == 1) {
+              this.$message.success("新增供应商成功")
+              this.pagination.current = 1
+              this.pagination.size = 20
+              this.getSupplier()
+              this.dialogFormVisible = false
+            }
+          })
+        } else {
+          return false;
+        }
+      });
+    },
+    /**
+     * 删除
+     */
+    delete(ids) {
+      deleteSupplier({ ids: ids }).then(res => {
+        if (res.code == 1) {
+          this.$message.success("删除成功")
+          this.pagination.current = 1
+          this.pagination.size = 20
+          this.getSupplier()
+        }
+      })
+    },
+    /**
+     * 提交删除
+     */
+    submitDelete(row = null) {
+      this.$confirm('此操作将删除供应商, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (!row) {
+          this.delete(row.id.toString())
+        } else {
+          let selects = this.$refs.table.selection;
+          const ids = selects.map(item => {
+            return item.id
+          }).join(',')
+          this.delete(ids)
+        }
+      }).catch(() => { });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+
+  .top {
+    height: 33px;
+    margin-bottom: 10px;
+    text-align: right;
+
+    .el-form .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .upload-demo {
+      display: inline-block;
+    }
+  }
+
+  .table-div {
+    height: calc(100% - 95px);
+  }
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+}
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+.el-dialog__wrapper {
+  >>> .el-form-item {
+    margin-bottom: 15px !important;
+  }
+  .item-title {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 10px;
+    font-weight: 600;
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 5px;
+      height: 18px;
+      vertical-align: text-bottom;
+      background-color: #2d74e7;
+      margin-right: 5px;
+    }
+  }
+}
+</style>

src/views/mbsys/materialmanage/inventorymanage/suppliesapply/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      物资申请
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/mbsys/materialmanage/materialputinManage/myPurchaseOrder/index.vue

@@ -0,0 +1,500 @@
+<template>
+  <!-- 我的采购单 -->
+  <div class="content-container">
+    <div class="top">
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="form"
+        label-width="auto"
+        style="float: left"
+      >
+        <el-form-item label="关键字:">
+          <el-input
+            v-model="form.content"
+            size="small"
+            placeholder="请输入采购单号、名称"
+            style="width: 180px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="供应商:">
+          <el-select
+            v-model="form.supplierId"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in suppliers"
+              :key="item.id"
+              :label="item.factoryName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="申购时间:">
+          <el-date-picker
+            v-model="form.purchaseTime"
+            type="daterange"
+            align="right"
+            value-format="yyyy-MM-DD"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            size="small"
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="small"
+          @click="queryProcess"
+          style="margin-top:4px"
+          >查询</el-button
+        >
+      </el-form>
+    </div>
+    <div class="table-div">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :style="{ width: '100%' }"
+        height="100%"
+        border
+        :header-cell-style="{
+          background: 'rgba(250,250,250)',
+          color: 'rgb(50,59,65)',
+          height: '39px',
+          textAlign: 'center',
+        }"
+      >
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="" />
+          <p class="empty-p">暂无数据</p>
+        </template>
+        <el-table-column label="序号" align="center" width="60px">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="processNumber"
+          label="采购单号"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="采购单名称"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="processState" label="工单状态" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getOrderStateNameById(row.processState) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="processNodeName" label="当前步骤" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.processNode == 100 ? "终止(" + row.sumNode + '/' + row.sumNode + ')' : (row.processNodeName + "(" + row.processNode + '/' + row.sumNode + ')')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="handleDeptName" label="当前处理部门" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ (row.handleDeptName == null || row.handleDeptName == "") ? '/' : row.handleDeptName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="handleStaffName" label="当前处理人" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ (row.handleStaffName == null || row.handleStaffName == "") ? '/' : row.handleStaffName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="urgeNumber" label="催办消息" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.urgeNumber }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerDept" label="申购部门" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getDeptName(row.registerDept) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerStaff"  label="申购人" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getUserName(row.registerDept,row.registerStaff) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="registerTime"
+          label="申购时间"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="supplier"
+          label="供应商"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="totalPrice"
+          label="采购价格合计(元)"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="prop" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button @click="queryOrderProcessById(scope.row,false)" icon="el-icon-tickets" title="查看" type="text" size="small" style="font-size:16px;"></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      :current-page="pagination.current"
+      :page-sizes="[20, 30, 50, 100, 200]"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @size-change="queryProcess"
+      @current-change="queryProcess"
+      layout="total, sizes, prev, pager, next, jumper"
+    />
+    <!-- 详情 -->
+    <el-dialog
+      class="tf-dialog"
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      width="1200px"
+      top="60px"
+      style="padding: 10px"
+    >
+      <process-order
+        v-if="dialogFormVisible"
+        ref="merge"
+        :orderName="orderName"
+        :orderCode="orderCode"
+        :businessType="businessType"
+        :proId="processId"
+        :optionType="optionType"
+        :editData="editData"
+        :comps="compts"
+        @remind="remind"
+      ></process-order>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small"
+          >取 消</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          @click="preserveHandler(0)"
+          size="small"
+          >保 存</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          type="primary"
+          @click="preserveHandler(1)"
+          size="small"
+          >提 交</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAllUserInfo } from "@/api/base";
+import { getMatterTypes } from "@/api/mbsys/materialmanage";
+import {
+  getTypetree,
+  getProcessPageList,
+  queryProcessPage,
+  qOrderProcessById,
+  addOrderProcess,
+  delOrderProcess,
+} from "@/api/process/process";
+import { getSupplier } from "@/api/mbsys/materialmanage";
+import { config } from "../../../components/cfgOrderProcess";
+import processOrder from "@/views/mbsys/publicOrder/orderProcess/detail";
+import { publicComponents } from "../processForm/config";
+export default {
+  components: { processOrder },
+  data() {
+    return {
+      config: config,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      allDept:[],  //所有部门
+      curUser: null, //当前登录人
+      orderName: "物料采购单", //工单名称
+      orderCode: "", //工单编号
+      suppliers: [], //供应商
+      form: {
+        content: "", //关键字
+        supplierId: "", //供应商
+        purchaseTime: [], //申购时间
+      },
+      tableData: [],
+      metrialCategories: [], //物资类别
+      title: "",
+      materialTypes: [],
+      selectMaterialTypes: [],
+      pagination: { current: 1, size: 20, total: 0 },
+      dialogFormVisible: false,
+      curProcess: null,
+      businessType: null, //业务类型
+      optionType: 0, //操作类型 0：查看，1：新增，2：修改
+      editData: {}, //操作数据
+      processId: 0, //流程ID
+      compts: publicComponents,
+      curEditRow:null,  //当前操作数据
+    };
+  },
+
+  created() {
+    this.curUser = this.$store.state.user; 
+    /**
+     * 查询所有用户所有部门和所有人
+     */
+    getAllUserInfo().then((res) => {
+      if (res.code == 1) {
+        const data = res.result
+        for (const i in data) {
+          data[i].value = data[i].id;
+          data[i].label = data[i].name;
+          if (data[i].users) {
+            data[i].children = data[i].users;
+            for (const j in data[i].children) {
+              data[i].children[j].value = data[i].children[j].id;
+              data[i].children[j].label = data[i].children[j].realName;
+            }
+          }
+        }
+        this.allDept = data;
+      }
+    });
+    this.getProcess();
+  },
+  mounted() {
+    
+  },
+  methods: {
+    /**
+     * 根据部门ID获取部门名称
+    */
+    getDeptName(deptId){
+      if(this.allDept.length > 0){
+        const dept = this.allDept.find(item => item.id == deptId)
+        if(dept) return dept.name
+        else deptId
+      }
+      else
+        return deptId
+    },
+    /**
+     * 根据部门ID和人员id获取人员名称
+    */
+    getUserName(deptId,userId){
+      if(this.allDept.length > 0){
+        const dept = this.allDept.find(item => item.id == deptId)
+        if(dept){
+          const user = dept.users.find(p => p.id == userId)
+          if(user)return user.realName
+          else return userId
+        }
+        else
+          return userId
+      }
+      else
+        return userId
+    },
+    /**
+     * 根据id获取工单状态
+     */
+    getOrderStateNameById(id) {
+      if (this.config && this.config.hasOwnProperty("orderState")) {
+        const obj = this.config.orderState.find((item) => item.key === id);
+        if (obj) return obj.value;
+        else return id;
+      } else {
+        return id;
+      }
+    },
+
+    /**
+     * 查询工单列表
+     */
+    queryProcess() {
+      //带入当前登录人查询
+      //IWorkOrder 无当前当前登录人相关
+      let params = Object.assign(
+        { ywType:this.businessType, configId:this.processId,IWorkOrder:true },
+        this.pagination
+      );
+      if (this.form.content != "")
+        Object.assign(params, { content: this.form.content });
+      if (this.form.supplierId != "")
+        Object.assign(params, { supplierId: this.form.supplierId });
+       //申购时间
+      if(this.form.purchaseTime.length > 1){
+        Object.assign(params, { endTime: this.form.purchaseTime[0] + " 00:00:00",stratTime: this.form.purchaseTime[1]} + " 23:59:59")
+      }
+      queryProcessPage(params).then((res) => {
+        if (res.code == 1) {
+          this.tableData = res.result.records;
+          this.pagination.total = res.result.total;
+        }
+      });
+    },
+
+    /**
+     * 查询列表数据
+     */
+    getProcess() {
+      let data = {
+        current: 1,
+        size: 999,
+      };
+      getProcessPageList(data)
+        .then((res) => {
+          this.curProcess = res.result.records.find(
+            (item) => item.processNumber === "CGLC"
+          );
+          if (this.curProcess) {
+            //this.getProcessById(this.curProcess.id);
+            this.processId = this.curProcess.id;
+            this.businessType = this.curProcess.hasOwnProperty("processType")
+              ? this.curProcess.processType
+              : null;
+          }
+          this.queryProcess()
+        })
+        .catch((ex) => {
+          this.$message.error("获取流程列表失败！");
+        });
+    },
+
+    // 提示
+    remind(data) {
+      this.dialogFormVisible = false;
+      //设置初始操作类型
+      this.optionType = 1;
+      this.queryProcess();
+    },
+
+    /**
+     * 通过id查询工单流程信息
+     * @row 查询数据
+     * @type 操作类型 false：查看，true：修改
+     */
+    queryOrderProcessById(row, type) {
+      this.curEditRow = type ? row : null
+      qOrderProcessById(row.id).then((res) => {
+        if (res.code == 1) {
+          this.title = type ? "采购申请-修改" : "采购申请-详情";
+          this.optionType = type ? 2 : 0;
+          this.editData = res.result;
+          this.dialogFormVisible = true;
+        }
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+
+  .top {
+    height: 33px;
+    margin-bottom: 10px;
+    text-align: right;
+
+    .el-form .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .upload-demo {
+      display: inline-block;
+    }
+  }
+
+  .table-div {
+    height: calc(100% - 87px);
+  }
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+}
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+.tf-dialog {
+  >>> .el-dialog__header {
+    background: #2d74e7;
+    .el-dialog__title {
+      color: aliceblue !important;
+    }
+    .el-dialog__close {
+      color: aliceblue !important;
+    }
+  }
+}
+</style>

src/views/mbsys/materialmanage/materialputinManage/processForm/config.js

@@ -0,0 +1,23 @@
+//相对publicOrder\orderRegister\detail\index.vue
+export const publicComponents = [
+    {
+        rank: 3,
+        pathName: "materialmanage/materialputinManage/purchaseRegist/registerForm.vue",
+    },
+    {
+        rank: 3,
+        pathName: "components/examineForm.vue",
+    },
+    {
+        rank: 3,
+        pathName: "components/examineForm.vue",
+    },
+    {
+        rank: 3,
+        pathName: "components/examineForm.vue",
+    },
+    {
+        rank: 3,
+        pathName: "components/examineForm.vue",
+    },
+]

src/views/mbsys/materialmanage/materialputinManage/purchaseArchives/index.vue

@@ -0,0 +1,744 @@
+<template>
+  <!-- 采购档案 -->
+  <div class="content-container">
+    <div class="top">
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="form"
+        label-width="auto"
+        style="float: left"
+      >
+        <el-form-item label="关键字:">
+          <el-input
+            v-model="form.content"
+            size="small"
+            placeholder="请输入采购单号、采购名称"
+            style="width: 220px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="供应商:">
+          <el-select
+            v-model="form.supplierId"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in suppliers"
+              :key="item.id"
+              :label="item.factoryName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="创建部门:">
+          <el-select
+            v-model="form.registerDept"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in allDept"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="创建时间:">
+          <el-date-picker
+            v-model="form.purchaseTime"
+            type="daterange"
+            align="right"
+            value-format="yyyy-MM-DD"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            size="small"
+            style="width: 240px"
+          />
+        </el-form-item>
+
+        <el-form-item label="工单状态:">
+          <el-select
+            v-model="form.orderState"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in orderStates"
+              :key="item.key"
+              :label="item.value"
+              :value="item.key"
+            />
+          </el-select>
+        </el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="small"
+          @click="queryProcess"
+          style="margin-top:4px"
+          >查询</el-button
+        >
+      </el-form>
+    </div>
+    <div class="table-div">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :style="{ width: '100%' }"
+        height="100%"
+        border
+        :header-cell-style="{
+          background: 'rgba(250,250,250)',
+          color: 'rgb(50,59,65)',
+          height: '39px',
+          textAlign: 'center',
+        }"
+      >
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="" />
+          <p class="empty-p">暂无数据</p>
+        </template>
+        <el-table-column label="序号" align="center" width="60px">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="processNumber"
+          label="采购单号"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="采购单名称"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="registerDept" label="申购部门" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getDeptName(row.registerDept) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerStaff"  label="申购人" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getUserName(row.registerDept,row.registerStaff) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="registerTime"
+          label="申购时间"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="supplier"
+          label="供应商"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="totalPrice"
+          label="采购价格合计(元)"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="processState" label="工单状态" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getOrderStateNameById(row.processState) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="prop" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button @click="queryOrderProcessById(scope.row,false)" icon="el-icon-tickets" title="查看" type="text" size="small" style="font-size:16px;"></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      :current-page="pagination.current"
+      :page-sizes="[20, 30, 50, 100, 200]"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @size-change="queryProcess"
+      @current-change="queryProcess"
+      layout="total, sizes, prev, pager, next, jumper"
+    />
+    <!-- 详情 -->
+    <el-dialog
+      class="tf-dialog"
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      width="1200px"
+      top="60px"
+      style="padding: 10px"
+    >
+      <process-order
+        v-if="dialogFormVisible"
+        ref="merge"
+        :orderName="orderName"
+        :orderCode="orderCode"
+        :businessType="businessType"
+        :proId="processId"
+        :optionType="optionType"
+        :editData="editData"
+        :comps="compts"
+        @remind="remind"
+      ></process-order>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small"
+          >取 消</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          @click="preserveHandler(0)"
+          size="small"
+          >保 存</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          type="primary"
+          @click="preserveHandler(1)"
+          size="small"
+          >提 交</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAllUserInfo } from "@/api/base";
+import { getMatterTypes } from "@/api/mbsys/materialmanage";
+import {
+  getTypetree,
+  getProcessPageList,
+  queryProcessPage,
+  qOrderProcessById,
+  addOrderProcess,
+  delOrderProcess,
+} from "@/api/process/process";
+import { getSupplier } from "@/api/mbsys/materialmanage";
+import { config } from "../../../components/cfgOrderProcess";
+import processOrder from "@/views/mbsys/publicOrder/orderProcess/detail";
+import { publicComponents } from "../processForm/config";
+export default {
+  components: { processOrder },
+  data() {
+    return {
+      config: config,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      allDept:[],  //所有部门
+      curUser: null, //当前登录人
+      orderName: "物料采购单", //工单名称
+      orderCode: "", //工单编号
+      suppliers: [], //供应商
+      orderStates:config.orderState,
+      form: {
+        content: "", //关键字
+        supplierId: "", //供应商
+        registerDept:"",//申购部门
+        purchaseTime: [], //申购时间
+        orderState:'' //工单状态
+      },
+      tableData: [],
+      metrialCategories: [], //物资类别
+      title: "",
+      materialTypes: [],
+      selectMaterialTypes: [],
+      pagination: { current: 1, size: 20, total: 0 },
+      dialogFormVisible: false,
+      curProcess: null,
+      businessType: null, //业务类型
+      optionType: 0, //操作类型 0：查看，1：新增，2：修改
+      editData: {}, //操作数据
+      processId: 0, //流程ID
+      compts: publicComponents,
+      curEditRow:null,  //当前操作数据
+    };
+  },
+
+  created() {
+    this.curUser = this.$store.state.user;
+    if (this.config && this.config.hasOwnProperty("metrialCategories"))
+      this.metrialCategories = this.config.metrialCategories;
+    //获取供应商
+    getSupplier({ current: 1, size: 9999 }).then((res) => {
+      if (res.code) {
+        this.suppliers = res.result.records;
+      }
+    });
+    /**
+     * 获取分类下的类型
+     */
+    let params = { current: 1, size: 999 };
+    getMatterTypes(params).then((res) => {
+      this.materialTypes = res.result.records;
+      this.selectMaterialTypes = this.materialTypes.filter((p) => true);
+    });
+    //获取业务类别
+    getTypetree({ datatypes: 0, id: "" })
+      .then((res) => {
+        if (res.code === 1) {
+          if (res.result.length > 0)
+            if (res.result[0].vos.length > 1)
+              this.businessTypes = res.result[0].vos[0].vos;
+        }
+      })
+      .catch((ex) => {
+        this.$message.error("获取数据出错！");
+      });
+    /**
+     * 查询所有用户所有部门和所有人
+     */
+    getAllUserInfo().then((res) => {
+      if (res.code == 1) {
+        const data = res.result
+        for (const i in data) {
+          data[i].value = data[i].id;
+          data[i].label = data[i].name;
+          if (data[i].users) {
+            data[i].children = data[i].users;
+            for (const j in data[i].children) {
+              data[i].children[j].value = data[i].children[j].id;
+              data[i].children[j].label = data[i].children[j].realName;
+            }
+          }
+        }
+        this.allDept = data;
+      }
+    });
+    this.getProcess();
+  },
+  mounted() {
+    
+  },
+  methods: {
+    /**
+     * 根据部门ID获取部门名称
+    */
+    getDeptName(deptId){
+      if(this.allDept.length > 0){
+        const dept = this.allDept.find(item => item.id == deptId)
+        if(dept) return dept.name
+        else deptId
+      }
+      else
+        return deptId
+    },
+    /**
+     * 根据部门ID和人员id获取人员名称
+    */
+    getUserName(deptId,userId){
+      if(this.allDept.length > 0){
+        const dept = this.allDept.find(item => item.id == deptId)
+        if(dept){
+          const user = dept.users.find(p => p.id == userId)
+          if(user)return user.realName
+          else return userId
+        }
+        else
+          return userId
+      }
+      else
+        return userId
+    },
+    /**
+     * 根据id获取工单状态
+     */
+    getOrderStateNameById(id) {
+      if (this.config && this.config.hasOwnProperty("orderState")) {
+        const obj = this.config.orderState.find((item) => item.key === id);
+        if (obj) return obj.value;
+        else return id;
+      } else {
+        return id;
+      }
+    },
+
+    /**
+     * 查询工单列表
+     */
+    queryProcess() {
+      //带入当前登录人查询
+      //processNode=100 终结归档
+      let params = Object.assign(
+        { ywType:this.businessType, configId:this.processId, processNode:100 },
+        this.pagination
+      );
+      //关键字
+      if (this.form.content != "")
+        Object.assign(params, { content: this.form.content })
+      //供应商
+      if (this.form.supplierId != "")
+        Object.assign(params, { supplierId: this.form.supplierId })
+      //申购部门
+      if(this.form.registerDept !="")
+        Object.assign(params, { registerDept: this.form.registerDept })
+      //申购时间
+      if(this.form.purchaseTime.length > 1){
+        Object.assign(params, { endTime: this.form.purchaseTime[0] + " 00:00:00",stratTime: this.form.purchaseTime[1]} + " 23:59:59")
+      }
+      //工单状态
+      if(this.form.orderState != "")
+        Object.assign(params, { processState: this.form.orderState })
+      queryProcessPage(params).then((res) => {
+        if (res.code == 1) {
+          this.tableData = res.result.records;
+          this.pagination.total = res.result.total;
+        }
+      });
+    },
+
+    /**
+     * 查询列表数据
+     */
+    getProcess() {
+      let data = {
+        current: 1,
+        size: 999,
+      };
+      getProcessPageList(data)
+        .then((res) => {
+          this.curProcess = res.result.records.find(
+            (item) => item.processNumber === "CGLC"
+          );
+          if (this.curProcess) {
+            //this.getProcessById(this.curProcess.id);
+            this.processId = this.curProcess.id;
+            this.businessType = this.curProcess.hasOwnProperty("processType")
+              ? this.curProcess.processType
+              : null;
+          }
+          this.queryProcess()
+        })
+        .catch((ex) => {
+          this.$message.error("获取流程列表失败！");
+        });
+    },
+
+    // 提示
+    remind(data) {
+      this.dialogFormVisible = false;
+      //设置初始操作类型
+      this.optionType = 1;
+      this.queryProcess();
+    },
+
+    /**
+     * 物资类型改变
+     */
+    changeCategory(value) {
+      if (value != null) {
+        this.selectMaterialTypes = [];
+        this.selectMaterialTypes = this.materialTypes.filter(
+          (p) => p.categoryType === value
+        );
+      } else {
+        this.selectMaterialTypes = this.materialTypes.filter((p) => true);
+      }
+    },
+
+    orderRegister() {
+      this.title = "采购申请-新增"
+      this.optionType = 1 //操作类型 0：查看，1：新增，2：修改
+      this.editData = {}
+       this.curEditRow = null
+      this.dialogFormVisible = true
+    },
+
+    /**
+     * 通过id查询工单流程信息
+     * @row 查询数据
+     * @type 操作类型 false：查看，true：修改
+     */
+    queryOrderProcessById(row, type) {
+      this.curEditRow = type ? row : null
+      qOrderProcessById(row.id).then((res) => {
+        if (res.code == 1) {
+          this.title = type ? "采购申请-修改" : "采购申请-详情";
+          this.optionType = type ? 2 : 0;
+          this.editData = res.result;
+          this.dialogFormVisible = true;
+        }
+      });
+    },
+
+    /**
+     * 删除工单流程
+     */
+    delOrderProcessById(row) {
+      this.$confirm(
+        `此操作将永久删除采购单号为【${row.processNumber}】采购名称为【${row.name}】的采购单, 是否继续?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.deleteOrder(row.id);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    /***
+     * 删除工单流程
+     */
+    deleteOrder(id) {
+      delOrderProcess(id).then((res) => {
+        if (res.code == 1) {
+          this.queryProcess();
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: "删除失败",
+          });
+        }
+      });
+    },
+
+    /**
+     * 新增工单流程信息
+     */
+    addOrder(param) {
+      addOrderProcess(param).then((res) => {
+        if (res.code == 1) {
+          this.queryProcess()
+          this.$message.success("新增采购单成功!")
+        }
+      });
+    },
+
+    /**
+     * 提交数据
+     * @state 操作状态  保存为0，提交为1
+     */
+    preserveHandler(state) {
+      let params = this.$refs.merge.submitForm();
+      //处理提交参数到接口参数映射
+      let data = this.formParamMapping(params, state);
+      this.addOrder(data);
+    },
+    /**
+     * 表单参数映射到提交参数
+     */
+    formParamMapping(data, state) {
+      let params = {
+        operateState:0 //	表单类型：0、其它； 1、采购入库（关联采购工单）；2、余料退库（关联出库工单）；3、工程出库（关联工程工单）；4其它出库；5、维修出库（关联维修工单）
+      };
+      let formData = new FormData();
+      if(this.curEditRow != null) Object.assign(params, { id: this.curEditRow.id }) //流程ID
+      //表单字段
+      if (data.hasOwnProperty("configId")) {
+        params = Object.assign(params, { configId: data.configId }); //流程配置ID
+      }
+      if (data.hasOwnProperty("form")) {
+        Object.assign(params, {
+          name: data.form.name, //	名称
+          registerTime: data.form.registerTime.length > 11 ? data.form.registerTime : data.form.registerTime + " 00:00:00", //登记时间
+          supplierId: data.form.supplier, //供应商ID
+          supplier: data.form.factoryName, //供应商名称
+          telephone: data.form.contactNumber, //联系电话
+          useDept: data.form.useDept, //申购部门
+          totalPrice: data.form.allPrice, //总价
+          remark: data.form.remark, //备注
+        });
+      }
+      Object.assign(params, { ywType: this.businessType }); //业务类型
+      let processNode = {
+        //第一步
+        handleResults: 0, //处理结果0:不处理；1:同意；2:不同意；
+        saveState: state, //0保存，1提交
+        annex:data.hasOwnProperty('existsFilesId') ?  data.existsFilesId : '' //附件id
+      };
+      //审核信息
+      if (data.hasOwnProperty("examine")) {
+        //下一步审核
+        let nextStep = {
+          dept: data.examine.hasOwnProperty("dept") ? data.examine.dept : "", //部门
+          deptStaff: data.examine.hasOwnProperty("deptStaff") ? data.examine.deptStaff : "", //人员
+          processStep: data.examine.hasOwnProperty("processStep") ? data.examine.processStep : 1, //流程步骤
+          stepNode:data.examine.hasOwnProperty("stepNode") ? data.examine.stepNode: 1, //步骤节点
+        };
+        Object.assign(
+          processNode,
+          { headleState: data.examine.headleState, //处理状态：1提交;2:驳回;3:转派;4:终止;
+            nextStep:nextStep, //下一步信息,下一步，驳回，转派
+            processStep:1, //流程步骤(当前)
+            stepNode:1   //步骤节点(当前)
+          }
+        );
+      }
+      //流程步骤 processStep
+      //	步骤节点 stepNode
+      Object.assign(params, { stepNode: 1 })
+      //物资信息 metrials
+      if (data.hasOwnProperty("metrials")) {
+        let stuffDtos = [];
+        data.metrials.forEach((metrial) => {
+          stuffDtos.push({
+            amountMoney: metrial.allPrice, //	金额
+            matterId: metrial.id, //物料ID
+            matterState: 1, //metrial.isAssets	物料状态1:新；2:旧  默认为1
+            quantity: metrial.purchaseNumber, //数量
+            unitPrice: parseFloat(metrial.purchasePrice), //单价
+          });
+        });
+        if (stuffDtos.length > 0)
+          Object.assign(processNode, { stuffDtos: stuffDtos }); //采购物资信息
+      }
+      //其他费用
+      if (data.hasOwnProperty("otherCost")) {
+        let otherCost = [];
+        data.otherCost.forEach((op) => {
+          otherCost.push({
+            amountMoney: op.cost, //金额
+            costName: op.costType, //费用名称
+            explain: op.remark, //费用说明
+            unitPrice: op.cost,
+          });
+        });
+        if (otherCost.length > 0)
+          Object.assign(processNode, { detailedDtos: otherCost }); //其他费用信息
+      }
+
+      Object.assign(params, { processNode: processNode }); //业务类型
+      console.log("提交参数：", params);
+      const json = JSON.stringify(params);
+      // 将 json 字符串转化为 Blob 对象
+      const blob = new Blob([json], {
+        type: "application/json",
+      });
+      formData.append("dto", blob);
+      //文件
+      if (data.hasOwnProperty("files")) {
+        let files = [];
+        data.files.forEach((file, index) => {
+          formData.append("fileList", file.file);
+        });
+      }
+      return formData;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+
+  .top {
+    height: 33px;
+    margin-bottom: 10px;
+    text-align: right;
+
+    .el-form .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .upload-demo {
+      display: inline-block;
+    }
+  }
+
+  .table-div {
+    height: calc(100% - 87px);
+  }
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+}
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+.tf-dialog {
+  >>> .el-dialog__header {
+    background: #2d74e7;
+    .el-dialog__title {
+      color: aliceblue !important;
+    }
+    .el-dialog__close {
+      color: aliceblue !important;
+    }
+  }
+}
+</style>

src/views/mbsys/materialmanage/materialputinManage/purchaseExamine/index.vue

@@ -0,0 +1,840 @@
+<template>
+  <!-- 采购审核 -->
+  <div class="content-container">
+    <div class="top">
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="form"
+        label-width="auto"
+        style="float: left"
+      >
+        <el-form-item label="关键字:">
+          <el-input
+            v-model="form.content"
+            size="small"
+            placeholder="请输入采购单号、采购名称"
+            style="width: 220px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="供应商:">
+          <el-select
+            v-model="form.supplierId"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in suppliers"
+              :key="item.id"
+              :label="item.factoryName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="申购部门:">
+          <el-select
+            v-model="form.registerDept"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in allDept"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="申购时间:">
+          <el-date-picker
+            v-model="form.purchaseTime"
+            type="daterange"
+            align="right"
+            value-format="yyyy-MM-DD"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            size="small"
+            style="width: 240px"
+          />
+        </el-form-item>
+
+        <el-form-item label="工单状态:">
+          <el-select
+            v-model="form.orderState"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in orderStates"
+              :key="item.key"
+              :label="item.value"
+              :value="item.key"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="small"
+          @click="queryProcess"
+          style="margin-top: 4px;"
+          >查询</el-button
+        >
+      </el-form>
+    </div>
+    <div class="table-div">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :style="{ width: '100%' }"
+        height="100%"
+        border
+        :header-cell-style="{
+          background: 'rgba(250,250,250)',
+          color: 'rgb(50,59,65)',
+          height: '39px',
+          textAlign: 'center',
+        }"
+      >
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="" />
+          <p class="empty-p">暂无数据</p>
+        </template>
+        <el-table-column label="序号" align="center" width="60px">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="processNumber"
+          label="采购单号"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="采购单名称"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="processState" label="工单状态" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getOrderStateNameById(row.processState) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="processNodeName" label="当前步骤" align="center">
+          <template slot-scope="{ row }">
+            <span>{{row.processNodeName + "(" + row.processNode + '/' + row.sumNode + ')'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="handleDeptName" label="当前处理部门" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ (row.handleDeptName == null || row.handleDeptName == "") ? '/' : row.handleDeptName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="handleStaffName" label="当前处理人" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ (row.handleStaffName == null || row.handleStaffName == "") ? '/' : row.handleStaffName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="urgeNumber" label="催办消息" align="center">
+          <template slot-scope="{ row }">
+            <el-popover
+              v-if="row.urgeNumber > 0"
+              placement="bottom"
+              title=""
+              width="280"
+              trigger="hover"
+              :content="row.urgeInfo"
+            >
+              <p v-for="(urge,ind) in row.urgeInfo" :key="ind">{{ urge }}</p>
+              <span slot="reference">{{ row.urgeNumber }}</span>
+            </el-popover>
+            <span v-else>{{ row.urgeNumber }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerDept" label="申购部门" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getDeptName(row.registerDept) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerStaff"  label="申购人" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getUserName(row.registerDept,row.registerStaff) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="registerTime"
+          label="申购时间"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="supplier"
+          label="供应商"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="totalPrice"
+          label="采购价格合计(元)"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="prop" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button @click="queryOrderProcessById(scope.row,false)" icon="el-icon-tickets" title="查看" type="text" size="small" style="font-size:16px;"></el-button>
+            <el-button @click="queryOrderProcessById(scope.row,true)" icon="el-icon-edit-outline" title="处理" type="text" size="small" style="font-size:16px;"></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      :current-page="pagination.current"
+      :page-sizes="[20, 30, 50, 100, 200]"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @size-change="queryProcess"
+      @current-change="queryProcess"
+      layout="total, sizes, prev, pager, next, jumper"
+    />
+    <!-- 详情 -->
+    <el-dialog
+      class="tf-dialog"
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      width="1200px"
+      top="60px"
+      style="padding: 10px"
+    >
+      <process-order
+        v-if="dialogFormVisible"
+        ref="merge"
+        :orderName="orderName"
+        :orderCode="orderCode"
+        :businessType="businessType"
+        :proId="processId"
+        :optionType="optionType"
+        :editData="editData"
+        :comps="compts"
+        @remind="remind"
+      ></process-order>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small"
+          >取 消</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          @click="preserveHandler(0)"
+          size="small"
+          >保 存</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          type="primary"
+          @click="preserveHandler(1)"
+          size="small"
+          >提 交</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAllUserInfo } from "@/api/base";
+import { getMatterTypes } from "@/api/mbsys/materialmanage";
+import {
+  getTypetree,
+  getProcessPageList,
+  queryProcessPage,
+  qOrderProcessById,
+  addOrderProcess,
+  examineProcess,
+  querySupervisePage
+} from "@/api/process/process";
+import { getSupplier } from "@/api/mbsys/materialmanage";
+import { config } from "../../../components/cfgOrderProcess";
+import processOrder from "@/views/mbsys/publicOrder/orderProcess/detail";
+import { publicComponents } from "../processForm/config";
+export default {
+  components: { processOrder },
+  data() {
+    return {
+      config: config,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      allDept:[],  //所有部门
+      curUser: null, //当前登录人
+      orderName: "物料采购单", //工单名称
+      orderCode: "", //工单编号
+      suppliers: [], //供应商
+      orderStates:config.orderState,
+      form: {
+        content: "", //关键字
+        supplierId: "", //供应商
+        registerDept:"",//申购部门
+        purchaseTime: [], //申购时间
+        orderState:'' //工单状态
+      },
+      tableData: [],
+      metrialCategories: [], //物资类别
+      title: "",
+      materialTypes: [],
+      selectMaterialTypes: [],
+      pagination: { current: 1, size: 20, total: 0 },
+      dialogFormVisible: false,
+      curProcess: null,
+      businessType: null, //业务类型
+      optionType: 0, //操作类型 0：查看，1：新增，2：修改
+      editData: {}, //操作数据
+      processId: 0, //流程ID
+      compts: publicComponents,
+      curEditRow:null,  //当前操作数据
+    };
+  },
+
+  async created() {
+    this.curUser = this.$store.state.user;
+    /**
+     * 查询所有用户所有部门
+     */
+    this.allDept = await this.getDeptAndUser();
+    if (this.config && this.config.hasOwnProperty("metrialCategories"))
+      this.metrialCategories = this.config.metrialCategories;
+    //获取供应商
+    getSupplier({ current: 1, size: 9999 }).then((res) => {
+      if (res.code) {
+        this.suppliers = res.result.records;
+      }
+    });
+    /**
+     * 获取分类下的类型
+     */
+    let params = { current: 1, size: 999 };
+    getMatterTypes(params).then((res) => {
+      this.materialTypes = res.result.records;
+      this.selectMaterialTypes = this.materialTypes.filter((p) => true);
+    });
+    //获取业务类别
+    getTypetree({ datatypes: 0, id: "" })
+      .then((res) => {
+        if (res.code === 1) {
+          if (res.result.length > 0)
+            if (res.result[0].vos.length > 1)
+              this.businessTypes = res.result[0].vos[0].vos;
+        }
+      })
+      .catch((ex) => {
+        this.$message.error("获取数据出错！");
+      });
+    this.getProcess();
+  },
+  mounted() {
+    //this.queryProcess();
+  },
+  methods: {
+    async getDeptAndUser() {
+      return new Promise((resolve) => {
+        getAllUserInfo().then((res) => {
+          const data = res.result;
+          for (const i in data) {
+            data[i].value = data[i].id;
+            data[i].label = data[i].name;
+            if (data[i].users) {
+              data[i].children = data[i].users;
+              for (const j in data[i].children) {
+                data[i].children[j].value = data[i].children[j].id;
+                data[i].children[j].label = data[i].children[j].realName;
+              }
+            }
+          }
+          resolve(data);
+        });
+      });
+    },
+    /**
+     * 根据部门ID获取部门名称
+    */
+    getDeptName(deptId){
+      if(this.allDept.length > 0){
+        const dept = this.allDept.find(item => item.id == deptId)
+        if(dept) return dept.name
+        else deptId
+      }
+      else
+        return deptId
+    },
+    /**
+     * 根据部门ID和人员id获取人员名称
+    */
+    getUserName(deptId,userId){
+      if(this.allDept.length > 0){
+        const dept = this.allDept.find(item => item.id == deptId)
+        if(dept){
+          const user = dept.users.find(p => p.id == userId)
+          if(user)return user.realName
+          else return userId
+        }
+        else
+          return userId
+      }
+      else
+        return userId
+    },
+    /**
+     * 根据id获取工单状态
+     */
+    getOrderStateNameById(id) {
+      if (this.config && this.config.hasOwnProperty("orderState")) {
+        const obj = this.config.orderState.find((item) => item.key === id);
+        if (obj) return obj.value;
+        else return id;
+      } else {
+        return id;
+      }
+    },
+
+    /**
+     * 查询工单列表
+     */
+    queryProcess() {
+      //带入当前登录人查询
+      //ywType 业务类型，基础类型
+      //configId 流程类型
+      //handleStaff 当前处理人
+      //processState 工单状态：1草稿、2处理、3终止、4处理完成
+      let params = Object.assign(
+        { ywType:this.businessType, configId:this.processId,handleStaff: this.curUser.userId, processState:2 },
+        this.pagination
+      );
+      //关键字
+      if (this.form.content != "")
+        Object.assign(params, { content: this.form.content })
+      //供应商
+      if (this.form.supplierId != "")
+        Object.assign(params, { supplierId: this.form.supplierId })
+      //申购部门
+      if(this.form.registerDept !="")
+        Object.assign(params, { registerDept: this.form.registerDept })
+      //申购时间
+      if(this.form.purchaseTime.length > 1){
+        Object.assign(params, { endTime: this.form.purchaseTime[0] + " 00:00:00",stratTime: this.form.purchaseTime[1]} + " 23:59:59")
+      }
+      //工单状态
+      if(this.form.orderState != "")
+        Object.assign(params, { processState: this.form.orderState })
+      queryProcessPage(params).then((res) => {
+        if (res.code == 1) {
+          //this.tableData = res.result.records;
+          this.getUrgeInfo(res.result.records)
+          this.pagination.total = res.result.total;
+        }
+      });
+    },
+
+    /**
+     * 查询列表数据
+     */
+    getProcess() {
+      let data = {
+        current: 1,
+        size: 999,
+      };
+      getProcessPageList(data)
+        .then((res) => {
+          this.curProcess = res.result.records.find(
+            (item) => item.processNumber === "CGLC"
+          );
+          if (this.curProcess) {
+            //this.getProcessById(this.curProcess.id);
+            this.processId = this.curProcess.id;
+            this.businessType = this.curProcess.hasOwnProperty("processType")
+              ? this.curProcess.processType
+              : null;
+          }
+          this.queryProcess();
+        })
+        .catch((ex) => {
+          this.$message.error("获取流程列表失败！");
+        });
+    },
+
+    // 提示
+    remind(data) {
+      this.dialogFormVisible = false;
+      //设置初始操作类型
+      this.optionType = 1;
+      this.queryProcess();
+    },
+
+
+    /**
+     * 通过id查询工单流程信息
+     * @row 查询数据
+     * @type 操作类型 false：查看，true：审核
+     */
+    queryOrderProcessById(row, type) {
+      this.curEditRow = type ? row : null
+      qOrderProcessById(row.id).then((res) => {
+        if (res.code == 1) {
+          this.title = type ? "采购单-审核" : "采购单-详情";
+          this.optionType = type ? 2 : 0; ////操作类型 0：查看，1：新增，2：修改
+          this.editData = res.result;
+          this.dialogFormVisible = true;
+        }
+      });
+    },
+
+    /**
+     * 新增工单流程信息
+     */
+    examineProcessOrder(param) {
+      examineProcess(param).then((res) => {
+        if (res.code == 1) {
+          this.dialogFormVisible = false
+          this.queryProcess()
+          this.$message.success("处理成功!")
+        }
+      });
+    },
+
+    /**
+     * 提交数据
+     * @state 操作状态  保存为0，提交为1
+     */
+    preserveHandler(state) {
+      let params = this.$refs.merge.submitForm();
+      console.log('提交数据',params)
+      if(this.editData.processNode == 1){ //对于第一步处理的数据，用登记接口提交
+        //处理提交参数到接口参数映射
+        const data = this.formParamMapping(params, state);
+        this.addOrder(data);
+      }
+      else{
+        //处理提交参数到接口参数映射
+        const data = this.examineFormParamMapping(params, state);
+        this.examineProcessOrder(data);
+      }
+    },
+    /**
+     * 新增工单流程信息
+     */
+    addOrder(param) {
+      addOrderProcess(param).then((res) => {
+        if (res.code == 1) {
+          this.dialogFormVisible = false
+          this.queryProcess()
+          this.$message.success("处理成功!")
+        }
+      });
+    },
+
+    /**
+     * 表单参数映射到提交参数
+     * 不是第一步审核的才用改映射方法
+     */
+    examineFormParamMapping(data, state) {
+      let params = {
+        handleResults: 0, //处理结果0:不处理；1:同意；2:不同意
+        operateState:0, //表单类型：0、其它； 1、采购入库（关联采购工单）；2、余料退库（关联出库工单）；3、工程出库（关联工程工单）；4其它出库；5、维修出库（关联维修工单）
+        processStep:data.curProcessStep, //当前流程步骤
+        stepNode:data.curStepNode, //当前步骤结点
+        headleState:data.headleState,  //处理状态：1提交;2:驳回;3:转派;4:终止;
+        remark:data.remarks, //当前处理意见
+        saveState:state  //0保存，1提交
+      };
+      const nextProcess = (data.processStep + '').split(',')
+      const nextStep = {  //下一步
+        dept:data.dept, //部门
+        deptStaff:data.deptStaff, //人员
+        processStep: (nextProcess && nextProcess.length > 0) ? parseInt(nextProcess[0]) : data.curProcessStep , //流程步骤
+        stepNode:(nextProcess && nextProcess.length > 1) ?  parseInt(nextProcess[1]) : data.stepNode //步骤结点
+      }
+     
+      let formData = new FormData();
+      if(this.curEditRow != null) Object.assign(params, { processId: this.curEditRow.id }) //流程ID
+      //表单字段
+      if (data.hasOwnProperty("configId")) {
+        params = Object.assign(params, { configId: data.configId }); //流程配置ID
+      }
+      Object.assign(params, { nextStep: nextStep });
+      const json = JSON.stringify(params);
+      // 将 json 字符串转化为 Blob 对象
+      const blob = new Blob([json], {
+        type: "application/json",
+      });
+      formData.append("dto", blob);
+      //文件
+      if (data.hasOwnProperty("files")) {
+        let files = [];
+        data.files.forEach((file, index) => {
+          formData.append("fileList", file.file);
+        });
+      }
+      return formData;
+    },
+    /**
+     * 表单参数映射到提交参数
+     */
+    formParamMapping(data, state) {
+      let params = {
+        operateState:0 //	表单类型：0、其它； 1、采购入库（关联采购工单）；2、余料退库（关联出库工单）；3、工程出库（关联工程工单）；4其它出库；5、维修出库（关联维修工单）
+      };
+      let formData = new FormData();
+      if(this.curEditRow != null) Object.assign(params, { id: this.curEditRow.id }) //流程ID
+      //表单字段
+      if (data.hasOwnProperty("configId")) {
+        params = Object.assign(params, { configId: data.configId }); //流程配置ID
+      }
+      if (data.hasOwnProperty("form")) {
+        Object.assign(params, {
+          name: data.form.name, //	名称
+          registerTime: data.form.registerTime.length > 11 ? data.form.registerTime : data.form.registerTime + " 00:00:00", //登记时间
+          supplierId: data.form.supplier, //供应商ID
+          supplier: data.form.factoryName, //供应商名称
+          telephone: data.form.contactNumber, //联系电话
+          useDept: data.form.useDept, //申购部门
+          totalPrice: data.form.allPrice, //总价
+          remark: data.form.remark, //备注
+        });
+      }
+      Object.assign(params, { ywType: this.businessType }); //业务类型
+      let processNode = {
+        //第一步
+        handleResults: 0, //处理结果0:不处理；1:同意；2:不同意；
+        saveState: state, //0保存，1提交
+        annex:data.hasOwnProperty('existsFilesId') ?  data.existsFilesId : '', //附件id
+        remark:data.hasOwnProperty("examine") ? data.examine.remarks : ''
+      };
+      //审核信息
+      if (data.hasOwnProperty("examine")) {
+        //下一步审核
+        let nextStep = {
+          dept: data.examine.hasOwnProperty("dept") ? data.examine.dept : "", //部门
+          deptStaff: data.examine.hasOwnProperty("deptStaff") ? data.examine.deptStaff : "", //人员
+          processStep: data.examine.hasOwnProperty("processStep") ? data.examine.processStep : 1, //流程步骤
+          stepNode:data.examine.hasOwnProperty("stepNode") ? data.examine.stepNode: 1, //步骤节点
+        };
+        Object.assign(
+          processNode,
+          { headleState: data.examine.headleState, //处理状态：1提交;2:驳回;3:转派;4:终止;
+            nextStep:nextStep, //下一步信息,下一步，驳回，转派
+            processStep:1, //流程步骤(当前)
+            stepNode:1   //步骤节点(当前)
+          }
+        );
+      }
+      //流程步骤 processStep
+      //	步骤节点 stepNode
+      Object.assign(params, { stepNode: 1 })
+      //物资信息 metrials
+      if (data.hasOwnProperty("metrials")) {
+        let stuffDtos = [];
+        data.metrials.forEach((metrial) => {
+          stuffDtos.push({
+            amountMoney: metrial.allPrice, //	金额
+            matterId: metrial.id, //物料ID
+            matterState: 1, //metrial.isAssets	物料状态1:新；2:旧  默认为1
+            quantity: metrial.purchaseNumber, //数量
+            unitPrice: parseFloat(metrial.purchasePrice), //单价
+          });
+        });
+        if (stuffDtos.length > 0)
+          Object.assign(processNode, { stuffDtos: stuffDtos }); //采购物资信息
+      }
+      //其他费用
+      if (data.hasOwnProperty("otherCost")) {
+        let otherCost = [];
+        data.otherCost.forEach((op) => {
+          otherCost.push({
+            amountMoney: op.cost, //金额
+            costName: op.costType, //费用名称
+            explain: op.remark, //费用说明
+            unitPrice: op.cost,
+          });
+        });
+        if (otherCost.length > 0)
+          Object.assign(processNode, { detailedDtos: otherCost }); //其他费用信息
+      }
+
+      Object.assign(params, { processNode: processNode }); //业务类型
+      const json = JSON.stringify(params);
+      // 将 json 字符串转化为 Blob 对象
+      const blob = new Blob([json], {
+        type: "application/json",
+      });
+      formData.append("dto", blob);
+      //文件
+      if (data.hasOwnProperty("files")) {
+        let files = [];
+        data.files.forEach((file, index) => {
+          formData.append("fileList", file.file);
+        });
+      }
+      return formData;
+    },
+
+    /**
+     * 获取催办消息
+     */
+    async getUrgeInfo(data) {
+      // this.tableData.forEach((row) => {
+        
+      // });
+      let tableList = data;
+      for(let i = 0 ; i < tableList.length;i++){
+        tableList[i]['urgeInfo'] = ''
+        if (tableList[i].urgeNumber > 0) {
+          let data = {
+            processId: tableList[i].id, //流程ID
+            nodeBranch: tableList[i].nodeBranch, //流程节点分支
+            processNode: tableList[i].processNode, //流程节点
+            superviseDept: parseInt(this.curUser.departmentId), //督办部门
+            superviseStaff: this.curUser.userId, //督办人
+          };
+          const res = await this.querySupervisePage(data)
+          
+          let result = []
+          if (res) {
+            res.result.records.forEach((item) => {
+              const dept = this.getDeptName(item.handleDept);
+              result.push(item.createTime +" " + dept +" " + item.createUserName + " " +item.remark)   
+            });
+          }
+
+          tableList[i]['urgeInfo'] = result
+        }
+      }
+      this.tableData = tableList
+    },
+
+    async querySupervisePage(data) {
+      return new Promise((resolve) => {
+        querySupervisePage(data).then((res) => {
+          if (res.code == 1) {
+            resolve(res);
+          } else {
+            resolve(null);
+          }
+        });
+      });
+    },
+    
+    /**
+     * 获取催办消息
+    */
+    getContent(row){
+      console.log('获取催办消息',row)
+      return '获取催办消息'
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+
+  .top {
+    height: 33px;
+    margin-bottom: 10px;
+    text-align: right;
+
+    .el-form .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .upload-demo {
+      display: inline-block;
+    }
+  }
+
+  .table-div {
+    height: calc(100% - 87px);
+  }
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+}
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+.tf-dialog {
+  >>> .el-dialog__header {
+    background: #2d74e7;
+    .el-dialog__title {
+      color: aliceblue !important;
+    }
+    .el-dialog__close {
+      color: aliceblue !important;
+    }
+  }
+}
+</style>

src/views/mbsys/materialmanage/materialputinManage/purchaseOrder/index.vue

@@ -0,0 +1,547 @@
+<template>
+  <!-- 采购查看 -->
+  <div class="content-container">
+    <div class="top">
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="form"
+        label-width="auto"
+        style="float: left"
+      >
+        <el-form-item label="关键字:">
+          <el-input
+            v-model="form.content"
+            size="small"
+            placeholder="请输入单号、名称"
+            style="width: 220px"
+          ></el-input>
+        </el-form-item>
+
+        <!-- <el-form-item label="供应商:">
+          <el-select
+            v-model="form.supplierId"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in suppliers"
+              :key="item.id"
+              :label="item.factoryName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item> -->
+
+        <el-form-item label="创建部门:">
+          <el-select
+            v-model="form.registerDept"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in allDept"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="创建时间:">
+          <el-date-picker
+            v-model="form.purchaseTime"
+            type="daterange"
+            align="right"
+            value-format="yyyy-MM-DD"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            size="small"
+            style="width: 240px"
+          />
+        </el-form-item>
+
+        <el-form-item label="工单状态:">
+          <el-select
+            v-model="form.orderState"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in orderStates"
+              :key="item.key"
+              :label="item.value"
+              :value="item.key"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="small"
+          @click="queryProcess"
+          style="margin-top:4px"
+          >查询</el-button
+        >
+      </el-form>
+    </div>
+    <div class="table-div">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :style="{ width: '100%' }"
+        height="100%"
+        border
+        :header-cell-style="{
+          background: 'rgba(250,250,250)',
+          color: 'rgb(50,59,65)',
+          height: '39px',
+          textAlign: 'center',
+        }"
+      >
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="" />
+          <p class="empty-p">暂无数据</p>
+        </template>
+        <el-table-column label="序号" align="center" width="60px">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="processNumber"
+          label="采购单号"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="采购单名称"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="processState" label="工单状态" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getOrderStateNameById(row.processState) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="processNodeName" label="当前步骤" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.processNode == 100 ? "终止(" + row.sumNode + '/' + row.sumNode + ')' : (row.processNodeName + "(" + row.processNode + '/' + row.sumNode + ')')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="handleDeptName" label="当前处理部门" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ (row.handleDeptName == null || row.handleDeptName == "") ? '/' : row.handleDeptName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="handleStaffName" label="当前处理人" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ (row.handleStaffName == null || row.handleStaffName == "") ? '/' : row.handleStaffName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="urgeNumber" label="催办消息" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.urgeNumber }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerDept" label="创建部门" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getDeptName(row.registerDept) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerStaff"  label="创建人" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getUserName(row.registerDept,row.registerStaff) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="创建时间"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="supplier"
+          label="供应商"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="totalPrice"
+          label="采购价格合计(元)"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="prop" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button @click="queryOrderProcessById(scope.row,false)" icon="el-icon-tickets" title="查看" type="text" size="small" style="font-size:16px;"></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      :current-page="pagination.current"
+      :page-sizes="[20, 30, 50, 100, 200]"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @size-change="queryProcess"
+      @current-change="queryProcess"
+      layout="total, sizes, prev, pager, next, jumper"
+    />
+    <!-- 详情 -->
+    <el-dialog
+      class="tf-dialog"
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      width="1200px"
+      top="60px"
+      style="padding: 10px"
+    >
+      <process-order
+        v-if="dialogFormVisible"
+        ref="merge"
+        :orderName="orderName"
+        :orderCode="orderCode"
+        :businessType="businessType"
+        :proId="processId"
+        :optionType="optionType"
+        :editData="editData"
+        :comps="compts"
+        @remind="remind"
+      ></process-order>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small"
+          >取 消</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          @click="preserveHandler(0)"
+          size="small"
+          >保 存</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          type="primary"
+          @click="preserveHandler(1)"
+          size="small"
+          >提 交</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAllUserInfo } from "@/api/base";
+import { getMatterTypes } from "@/api/mbsys/materialmanage";
+import {
+  getTypetree,
+  getProcessPageList,
+  queryProcessPage,
+  qOrderProcessById,
+  addOrderProcess,
+  delOrderProcess,
+} from "@/api/process/process";
+import { getSupplier } from "@/api/mbsys/materialmanage";
+import { config } from "../../../components/cfgOrderProcess";
+import processOrder from "@/views/mbsys/publicOrder/orderProcess/detail";
+import { publicComponents } from "../processForm/config";
+export default {
+  components: { processOrder },
+  data() {
+    return {
+      config: config,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      allDept:[],  //所有部门
+      curUser: null, //当前登录人
+      orderName: "物料采购单", //工单名称
+      orderCode: "", //工单编号
+      suppliers: [], //供应商
+      orderStates:config.orderState,
+      form: {
+        content: "", //关键字
+        supplierId: "", //供应商
+        registerDept:"",//申购部门
+        purchaseTime: [], //申购时间
+        orderState:'' //工单状态
+      },
+      tableData: [],
+      metrialCategories: [], //物资类别
+      title: "",
+      materialTypes: [],
+      selectMaterialTypes: [],
+      pagination: { current: 1, size: 20, total: 0 },
+      dialogFormVisible: false,
+      curProcess: null,
+      businessType: null, //业务类型
+      optionType: 0, //操作类型 0：查看，1：新增，2：修改
+      editData: {}, //操作数据
+      processId: 0, //流程ID
+      compts: publicComponents,
+      curEditRow:null,  //当前操作数据
+    };
+  },
+
+  created() {
+    this.curUser = this.$store.state.user; 
+    /**
+     * 查询所有用户所有部门和所有人
+     */
+    getAllUserInfo().then((res) => {
+      if (res.code == 1) {
+        const data = res.result
+        for (const i in data) {
+          data[i].value = data[i].id;
+          data[i].label = data[i].name;
+          if (data[i].users) {
+            data[i].children = data[i].users;
+            for (const j in data[i].children) {
+              data[i].children[j].value = data[i].children[j].id;
+              data[i].children[j].label = data[i].children[j].realName;
+            }
+          }
+        }
+        this.allDept = data;
+      }
+    });
+    this.getProcess();
+  },
+  mounted() {
+    
+  },
+  methods: {
+    /**
+     * 根据部门ID获取部门名称
+    */
+    getDeptName(deptId){
+      if(this.allDept.length > 0){
+        const dept = this.allDept.find(item => item.id == deptId)
+        if(dept) return dept.name
+        else deptId
+      }
+      else
+        return deptId
+    },
+    /**
+     * 根据部门ID和人员id获取人员名称
+    */
+    getUserName(deptId,userId){
+      if(this.allDept.length > 0){
+        const dept = this.allDept.find(item => item.id == deptId)
+        if(dept){
+          const user = dept.users.find(p => p.id == userId)
+          if(user)return user.realName
+          else return userId
+        }
+        else
+          return userId
+      }
+      else
+        return userId
+    },
+    /**
+     * 根据id获取工单状态
+     */
+    getOrderStateNameById(id) {
+      if (this.config && this.config.hasOwnProperty("orderState")) {
+        const obj = this.config.orderState.find((item) => item.key === id);
+        if (obj) return obj.value;
+        else return id;
+      } else {
+        return id;
+      }
+    },
+
+    /**
+     * 查询工单列表
+     */
+    queryProcess() {
+      //带入当前登录人查询
+      let params = Object.assign(
+        { ywType:this.businessType, configId:this.processId },
+        this.pagination
+      );
+      //关键字
+      if (this.form.content != "")
+        Object.assign(params, { content: this.form.content })
+      //供应商
+      // if (this.form.supplierId != "")
+      //   Object.assign(params, { supplierId: this.form.supplierId })
+      //申购部门
+      if(this.form.registerDept !="")
+        Object.assign(params, { registerDept: this.form.registerDept })
+      //申购时间
+      if(this.form.purchaseTime.length > 1){
+        Object.assign(params, { endTime: this.form.purchaseTime[0] + " 00:00:00",stratTime: this.form.purchaseTime[1]} + " 23:59:59")
+      }
+      //工单状态
+      if(this.form.orderState != "")
+        Object.assign(params, { processState: this.form.orderState })
+      queryProcessPage(params).then((res) => {
+        if (res.code == 1) {
+          this.tableData = res.result.records;
+          this.pagination.total = res.result.total;
+        }
+      });
+    },
+
+    /**
+     * 查询列表数据
+     */
+    getProcess() {
+      let data = {
+        current: 1,
+        size: 999,
+      };
+      getProcessPageList(data)
+        .then((res) => {
+          this.curProcess = res.result.records.find(
+            (item) => item.processNumber === "CGLC"
+          );
+          if (this.curProcess) {
+            //this.getProcessById(this.curProcess.id);
+            this.processId = this.curProcess.id;
+            this.businessType = this.curProcess.hasOwnProperty("processType")
+              ? this.curProcess.processType
+              : null;
+          }
+          this.queryProcess()
+        })
+        .catch((ex) => {
+          this.$message.error("获取流程列表失败！");
+        });
+    },
+
+    // 提示
+    remind(data) {
+      this.dialogFormVisible = false;
+      //设置初始操作类型
+      this.optionType = 1;
+      this.queryProcess();
+    },
+
+    /**
+     * 通过id查询工单流程信息
+     * @row 查询数据
+     * @type 操作类型 false：查看，true：修改
+     */
+    queryOrderProcessById(row, type) {
+      this.curEditRow = type ? row : null
+      qOrderProcessById(row.id).then((res) => {
+        if (res.code == 1) {
+          this.title = type ? "采购申请-修改" : "采购申请-详情";
+          this.optionType = type ? 2 : 0;
+          this.editData = res.result;
+          this.dialogFormVisible = true;
+        }
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+
+  .top {
+    height: 33px;
+    margin-bottom: 10px;
+    text-align: right;
+
+    .el-form .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .upload-demo {
+      display: inline-block;
+    }
+  }
+
+  .table-div {
+    height: calc(100% - 87px);
+  }
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+}
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+.tf-dialog {
+  >>> .el-dialog__header {
+    background: #2d74e7;
+    .el-dialog__title {
+      color: aliceblue !important;
+    }
+    .el-dialog__close {
+      color: aliceblue !important;
+    }
+  }
+}
+</style>

src/views/mbsys/materialmanage/materialputinManage/purchaseRegist/index.vue

@@ -0,0 +1,599 @@
+<template>
+  <!-- 采购登记 -->
+  <div class="content-container">
+    <div class="top">
+      <el-form ref="form" :inline="true" :model="form" label-width="auto" style="float: left">
+        <el-form-item label="关键字:">
+          <el-input v-model="form.content" size="small" placeholder="请输入采购单号、采购名称" style="width: 220px"></el-input>
+        </el-form-item>
+
+        <el-form-item label="供应商:">
+          <el-select v-model="form.supplierId" filterable clearable collapse-tags placeholder="请选择供应商" size="small">
+            <el-option v-for="item in suppliers" :key="item.id" :label="item.factoryName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="申购时间:">
+          <el-date-picker v-model="form.purchaseTime" type="daterange" align="right" value-format="yyyy-MM-DD" unlink-panels
+                          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" size="small"
+                          style="width: 240px" />
+        </el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="small" @click="queryProcess" style="margin-top: 4px;">查询</el-button>
+      </el-form>
+      <el-button type="primary" icon="el-icon-plus" size="small" @click="orderRegister" style="margin-top: 4px;">添加</el-button>
+      <el-button type="primary" icon="el-icon-upload2" size="small" style="margin-top: 4px;">导出</el-button>
+    </div>
+    <div class="table-div">
+      <el-table :data="tableData" style="width: 100%" :style="{ width: '100%' }" height="100%" border :header-cell-style="{
+          background: 'rgba(250,250,250)',
+          color: 'rgb(50,59,65)',
+          height: '39px',
+          textAlign: 'center',
+        }">
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="" />
+          <p class="empty-p">暂无数据</p>
+        </template>
+        <el-table-column label="序号" align="center" width="60px">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="processNumber" label="工单编号" align="center"></el-table-column>
+        <el-table-column prop="name" label="入库单号" align="center"></el-table-column>
+        <el-table-column prop="registerDept" label="入库物资类型" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getDeptName(row.registerDept) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerStaff" label="采购物资类型" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getUserName(row.registerDept,row.registerStaff) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerTime" label="入库总价（元）" align="center"></el-table-column>
+        <el-table-column prop="supplier" label="采购总价（元）" align="center"></el-table-column>
+        <el-table-column prop="supplier" label="创建部门" align="center"></el-table-column>
+        <el-table-column prop="supplier" label="创建人" align="center"></el-table-column>
+        <el-table-column prop="totalPrice" label="创建时间" align="center"></el-table-column>
+        <!-- <el-table-column prop="prop" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button @click="queryOrderProcessById(scope.row,false)" icon="el-icon-tickets" title="查看" type="text" size="small"
+                       style="font-size:16px;"></el-button>
+            <el-button v-if="scope.row.processState == 1" @click="queryOrderProcessById(scope.row,true)" icon="el-icon-edit" title="修改"
+                       type="text" size="small" style="font-size:16px;"></el-button>
+            <el-button v-if="scope.row.processState == 1" @click="delOrderProcessById(scope.row)" icon="el-icon-delete" title="删除"
+                       type="text" size="small" style="font-size:16px;color:red;"></el-button>
+          </template>
+        </el-table-column> -->
+      </el-table>
+    </div>
+    <el-pagination :current-page="pagination.current" :page-sizes="[20, 30, 50, 100, 200]" :page-size="pagination.size"
+                   :total="pagination.total" @size-change="queryProcess" @current-change="queryProcess"
+                   layout="total, sizes, prev, pager, next, jumper" />
+    <!-- 详情 -->
+    <el-dialog class="tf-dialog" :title="title" :visible.sync="dialogFormVisible" width="1200px" top="60px" style="padding: 10px">
+      <process-order v-if="dialogFormVisible" ref="merge" :orderName="orderName" :orderCode="orderCode" :businessType="businessType"
+                     :proId="processId" :optionType="optionType" :editData="editData" :comps="compts" @remind="remind"></process-order>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
+        <el-button v-if="optionType != 0" @click="preserveHandler(0)" size="small">保 存</el-button>
+        <el-button v-if="optionType != 0" type="primary" @click="preserveHandler(1)" size="small">提 交</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAllUserInfo } from "@/api/base";
+import { getMatterTypes } from "@/api/mbsys/materialmanage";
+import {
+  getTypetree,
+  getProcessPageList,
+  queryProcessPage,
+  qOrderProcessById,
+  addOrderProcess,
+  delOrderProcess,
+} from "@/api/process/process";
+import { getSupplier } from "@/api/mbsys/materialmanage";
+import { config } from "../../../components/cfgOrderProcess";
+import processOrder from "@/views/mbsys/publicOrder/orderProcess/detail";
+import { publicComponents } from "../processForm/config";
+export default {
+  components: { processOrder },
+  data() {
+    return {
+      config: config,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      allDept: [],  //所有部门
+      curUser: null, //当前登录人
+      orderName: "物料采购单", //工单名称
+      orderCode: "", //工单编号
+      suppliers: [], //供应商
+      form: {
+        content: "", //关键字
+        supplierId: "", //供应商
+        purchaseTime: [], //申购时间
+      },
+      tableData: [],
+      metrialCategories: [], //物资类别
+      title: "",
+      materialTypes: [],
+      selectMaterialTypes: [],
+      pagination: { current: 1, size: 20, total: 0 },
+      dialogFormVisible: false,
+      curProcess: null,
+      businessType: null, //业务类型
+      optionType: 0, //操作类型 0：查看，1：新增，2：修改
+      editData: {}, //操作数据
+      processId: 0, //流程ID
+      compts: publicComponents,
+      curEditRow: null,  //当前操作数据
+    };
+  },
+
+  created() {
+    this.curUser = this.$store.state.user;
+    if (this.config && this.config.hasOwnProperty("metrialCategories"))
+      this.metrialCategories = this.config.metrialCategories;
+    //获取供应商
+    getSupplier({ current: 1, size: 9999 }).then((res) => {
+      if (res.code) {
+        this.suppliers = res.result.records;
+      }
+    });
+    /**
+     * 获取分类下的类型
+     */
+    let params = { current: 1, size: 999 };
+    getMatterTypes(params).then((res) => {
+      this.materialTypes = res.result.records;
+      this.selectMaterialTypes = this.materialTypes.filter((p) => true);
+    });
+    //获取业务类别
+    getTypetree({ datatypes: 0, id: "" })
+      .then((res) => {
+        if (res.code === 1) {
+          if (res.result.length > 0)
+            if (res.result[0].vos.length > 1)
+              this.businessTypes = res.result[0].vos[0].vos;
+        }
+      })
+      .catch((ex) => {
+        this.$message.error("获取数据出错！");
+      });
+    /**
+     * 查询所有用户所有部门和所有人
+     */
+    getAllUserInfo().then((res) => {
+      if (res.code == 1) {
+        const data = res.result
+        for (const i in data) {
+          data[i].value = data[i].id;
+          data[i].label = data[i].name;
+          if (data[i].users) {
+            data[i].children = data[i].users;
+            for (const j in data[i].children) {
+              data[i].children[j].value = data[i].children[j].id;
+              data[i].children[j].label = data[i].children[j].realName;
+            }
+          }
+        }
+        this.allDept = data;
+      }
+    });
+    this.getProcess();
+  },
+  mounted() {
+    //this.queryProcess();
+  },
+  methods: {
+    /**
+     * 根据部门ID获取部门名称
+    */
+    getDeptName(deptId) {
+      if (this.allDept.length > 0) {
+        const dept = this.allDept.find(item => item.id == deptId)
+        if (dept) return dept.name
+        else deptId
+      }
+      else
+        return deptId
+    },
+    /**
+     * 根据部门ID和人员id获取人员名称
+    */
+    getUserName(deptId, userId) {
+      if (this.allDept.length > 0) {
+        const dept = this.allDept.find(item => item.id == deptId)
+        if (dept) {
+          const user = dept.users.find(p => p.id == userId)
+          if (user) return user.realName
+          else return userId
+        }
+        else
+          return userId
+      }
+      else
+        return userId
+    },
+    /**
+     * 根据id获取工单状态
+     */
+    getOrderStateNameById(id) {
+      if (this.config && this.config.hasOwnProperty("orderState")) {
+        const obj = this.config.orderState.find((item) => item.key === id);
+        if (obj) return obj.value;
+        else return id;
+      } else {
+        return id;
+      }
+    },
+
+    /**
+     * 查询工单列表
+     */
+    queryProcess() {
+      //带入当前登录人查询 
+      //ywType 业务类型，基础类型
+      //configId 流程类型
+      //registerStaff 登记人
+      //processState 工单状态：1草稿、2处理、3终止、4处理完成
+      console.log('时间', this.form.purchaseTime)
+      let params = Object.assign(
+        { ywType: this.businessType, configId: this.processId, registerStaff: this.curUser.userId },
+        this.pagination
+      );
+      if (this.form.content != "")
+        Object.assign(params, { content: this.form.content })
+      if (this.form.supplierId != "")
+        Object.assign(params, { supplierId: this.form.supplierId })
+      if (this.form.purchaseTime.length > 1) {
+        Object.assign(params, { endTime: this.form.purchaseTime[0] + " 00:00:00", stratTime: this.form.purchaseTime[1] } + " 23:59:59")
+      }
+      queryProcessPage(params).then((res) => {
+        if (res.code == 1) {
+          this.tableData = res.result.records;
+          this.pagination.total = res.result.total;
+        }
+      });
+    },
+
+    /**
+     * 查询列表数据
+     */
+    getProcess() {
+      let data = {
+        current: 1,
+        size: 999,
+      };
+      getProcessPageList(data)
+        .then((res) => {
+          this.curProcess = res.result.records.find(
+            (item) => item.processNumber === "CGLC"
+          );
+          if (this.curProcess) {
+            //this.getProcessById(this.curProcess.id);
+            this.processId = this.curProcess.id;
+            this.businessType = this.curProcess.hasOwnProperty("processType")
+              ? this.curProcess.processType
+              : null;
+          }
+          this.queryProcess();
+        })
+        .catch((ex) => {
+          this.$message.error("获取流程列表失败！");
+        });
+    },
+
+    // 提示
+    remind(data) {
+      this.dialogFormVisible = false;
+      //设置初始操作类型
+      this.optionType = 1;
+      this.queryProcess();
+    },
+
+    /**
+     * 物资类型改变
+     */
+    changeCategory(value) {
+      if (value != null) {
+        this.selectMaterialTypes = [];
+        this.selectMaterialTypes = this.materialTypes.filter(
+          (p) => p.categoryType === value
+        );
+      } else {
+        this.selectMaterialTypes = this.materialTypes.filter((p) => true);
+      }
+    },
+
+    orderRegister() {
+      this.title = "采购申请-新增"
+      this.optionType = 1 //操作类型 0：查看，1：新增，2：修改
+      this.editData = {}
+      this.curEditRow = null
+      this.dialogFormVisible = true
+    },
+
+    /**
+     * 通过id查询工单流程信息
+     * @row 查询数据
+     * @type 操作类型 false：查看，true：修改
+     */
+    queryOrderProcessById(row, type) {
+      this.curEditRow = type ? row : null
+      qOrderProcessById(row.id).then((res) => {
+        if (res.code == 1) {
+          this.title = type ? "采购申请-修改" : "采购申请-详情";
+          this.optionType = type ? 2 : 0;
+          this.editData = res.result;
+          this.dialogFormVisible = true;
+        }
+      });
+    },
+
+    /**
+     * 删除工单流程
+     */
+    delOrderProcessById(row) {
+      this.$confirm(
+        `此操作将永久删除采购单号为【${row.processNumber}】采购名称为【${row.name}】的采购单, 是否继续?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.deleteOrder(row.id);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    /***
+     * 删除工单流程
+     */
+    deleteOrder(id) {
+      delOrderProcess(id).then((res) => {
+        if (res.code == 1) {
+          this.queryProcess();
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          })
+        } else {
+          this.$message({
+            type: "error",
+            message: "删除失败",
+          });
+        }
+      });
+    },
+
+    /**
+     * 新增工单流程信息
+     */
+    addOrder(param) {
+      addOrderProcess(param).then((res) => {
+        if (res.code == 1) {
+          this.dialogFormVisible = false
+          this.queryProcess()
+          this.$message.success("采购单编辑成功!")
+        }
+      });
+    },
+
+    /**
+     * 提交数据
+     * @state 操作状态  保存为0，提交为1
+     */
+    preserveHandler(state) {
+      let params = this.$refs.merge.submitForm();
+      //处理提交参数到接口参数映射
+      let data = this.formParamMapping(params, state);
+      this.addOrder(data);
+    },
+
+    /**
+     * 表单参数映射到提交参数
+     */
+    formParamMapping(data, state) {
+      let params = {
+        operateState: 0 //	表单类型：0、其它； 1、采购入库（关联采购工单）；2、余料退库（关联出库工单）；3、工程出库（关联工程工单）；4其它出库；5、维修出库（关联维修工单）
+      };
+      let formData = new FormData();
+      if (this.curEditRow != null) Object.assign(params, { id: this.curEditRow.id }) //流程ID
+      //表单字段
+      if (data.hasOwnProperty("configId")) {
+        params = Object.assign(params, { configId: data.configId }); //流程配置ID
+      }
+      if (data.hasOwnProperty("form")) {
+        Object.assign(params, {
+          name: data.form.name, //	名称
+          registerTime: data.form.registerTime.length > 11 ? data.form.registerTime : data.form.registerTime + " 00:00:00", //登记时间
+          supplierId: data.form.supplier, //供应商ID
+          supplier: data.form.factoryName, //供应商名称
+          telephone: data.form.contactNumber, //联系电话
+          useDept: data.form.useDept, //申购部门
+          totalPrice: data.form.allPrice, //总价
+          remark: data.form.remark, //备注
+        });
+      }
+      Object.assign(params, { ywType: this.businessType }); //业务类型
+      let processNode = {
+        //第一步
+        handleResults: 0, //处理结果0:不处理；1:同意；2:不同意；
+        saveState: state, //0保存，1提交
+        annex: data.hasOwnProperty('existsFilesId') ? data.existsFilesId : '', //附件id
+        remark: data.hasOwnProperty("examine") ? data.examine.remarks : ''
+      };
+      //审核信息
+      if (data.hasOwnProperty("examine")) {
+        //下一步审核
+        let nextStep = {
+          dept: data.examine.hasOwnProperty("dept") ? data.examine.dept : "", //部门
+          deptStaff: data.examine.hasOwnProperty("deptStaff") ? data.examine.deptStaff : "", //人员
+          processStep: data.examine.hasOwnProperty("processStep") ? data.examine.processStep : 1, //流程步骤
+          stepNode: data.examine.hasOwnProperty("stepNode") ? data.examine.stepNode : 1, //步骤节点
+        };
+        Object.assign(
+          processNode,
+          {            headleState: data.examine.headleState, //处理状态：1提交;2:驳回;3:转派;4:终止;
+            nextStep: nextStep, //下一步信息,下一步，驳回，转派
+            processStep: 1, //流程步骤(当前)
+            stepNode: 1   //步骤节点(当前)
+          }
+        );
+      }
+      //流程步骤 processStep
+      //	步骤节点 stepNode
+      Object.assign(params, { stepNode: 1 })
+      //物资信息 metrials
+      if (data.hasOwnProperty("metrials")) {
+        let stuffDtos = [];
+        data.metrials.forEach((metrial) => {
+          stuffDtos.push({
+            amountMoney: metrial.allPrice, //	金额
+            matterId: metrial.id, //物料ID
+            matterState: 1, //metrial.isAssets	物料状态1:新；2:旧  默认为1
+            quantity: metrial.purchaseNumber, //数量
+            unitPrice: parseFloat(metrial.purchasePrice), //单价
+            remark: metrial.remark //备注
+          });
+        });
+        if (stuffDtos.length > 0)
+          Object.assign(processNode, { stuffDtos: stuffDtos }); //采购物资信息
+      }
+      //其他费用
+      if (data.hasOwnProperty("otherCost")) {
+        let otherCost = [];
+        data.otherCost.forEach((op) => {
+          otherCost.push({
+            amountMoney: op.cost, //金额
+            costName: op.costType, //费用名称
+            explain: op.remark, //费用说明
+            unitPrice: op.cost,
+          });
+        });
+        if (otherCost.length > 0)
+          Object.assign(processNode, { detailedDtos: otherCost }); //其他费用信息
+      }
+
+      Object.assign(params, { processNode: processNode }); //业务类型
+      const json = JSON.stringify(params);
+      // 将 json 字符串转化为 Blob 对象
+      const blob = new Blob([json], {
+        type: "application/json",
+      });
+      formData.append("dto", blob);
+      //文件
+      if (data.hasOwnProperty("files")) {
+        let files = [];
+        data.files.forEach((file, index) => {
+          formData.append("fileList", file.file);
+        });
+      }
+      return formData;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+
+  .top {
+    height: 33px;
+    margin-bottom: 10px;
+    text-align: right;
+
+    .el-form .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .upload-demo {
+      display: inline-block;
+    }
+  }
+
+  .table-div {
+    height: calc(100% - 87px);
+  }
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+}
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+.tf-dialog {
+  >>> .el-dialog__header {
+    background: #2d74e7;
+    .el-dialog__title {
+      color: aliceblue !important;
+    }
+    .el-dialog__close {
+      color: aliceblue !important;
+    }
+  }
+}
+</style>

src/views/mbsys/materialmanage/materialputinManage/purchaseRegist/registerForm.vue

@@ -0,0 +1,757 @@
+<template>
+  <!-- 采购申请详情 -->
+  <div class="form-container">
+    <el-form :model="form" label-width="auto">
+      <blocks title="基本信息">
+        <el-row :gutter="24">
+          <el-col :span="8">
+            <el-form-item label="采购单">
+              <!-- <el-input v-model="form.name" size="small" :disabled="isOpt ? (optionType == 0 ? true : false) : true"></el-input> -->
+              <el-select v-model="form.name" placeholder="请选择采购单" size="small" style="width:100%">
+                <el-option v-for="item in []" :key="item" label="item.label" value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="申购部门">
+              <el-select v-model="form.useDept" filterable collapse-tags placeholder="请选择处理部门" size="small" disabled style="width:100%">
+                <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="申购人">
+              <el-input v-model="form.personLiable" size="small" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="申购时间">
+              <el-date-picker v-model="form.registerTime" type="date" size="small" placeholder="选择日期" style="width: 100%"
+                              @change="registerTimeChange" :disabled="isOpt ? (optionType == 0 ? true : false) : true">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="供货单位">
+              <el-select v-model="form.supplier" filterable collapse-tags placeholder="请选择供应商" size="small" style="width:100%"
+                         @change="(value) => changeSupplier(value, 'id')" :disabled="isOpt ? (optionType == 0 ? true : false) : true">
+                <el-option v-for="item in suppliers" :key="item.id" :label="item.factoryName" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="收货人">
+              <el-input v-model="form.contacts" size="small"></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="入库单号">
+              <el-input v-model="form.contactNumber" size="small" disabled></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="入库总价">
+              <el-input v-model="form.allPrice" size="small" disabled style="width: calc(100% - 25px)">
+              </el-input>
+              <span>元</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </blocks>
+
+      <blocks title="入库明细">
+        <el-row :gutter="24">
+          <el-col :span="24">
+            <el-table :data="tableData" style="width: 100%" height="300px" :key="itemKey" border :header-cell-style="{
+                background: 'rgba(250,250,250)',
+                color: 'rgb(50,59,65)',
+                height: '39px',
+                textAlign: 'center',
+              }">
+              <template slot="empty">
+                <img src="@/assets/icon/null.png" alt="" />
+                <p class="empty-p">暂无数据</p>
+              </template>
+              <el-table-column prop="level1" label="是否入库" align="center">
+                <template slot-scope="{row}">
+                  <el-switch v-model="row.isputin" inactive-text="否" active-text="是"></el-switch>
+                </template>
+              </el-table-column>
+              <el-table-column label="序号" align="center" width="60px">
+                <template slot-scope="scope">
+                  <span>{{ scope.$index + 1 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="categoryType" label="物资类别" align="center">
+                <template slot-scope="{ row }">
+                  <span>{{ getCategoryName(row.categoryType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="matterName" label="物资类型" align="center"></el-table-column>
+              <el-table-column prop="standards" label="规格型号" align="center" />
+              <el-table-column prop="unit" label="单位" align="center" />
+              <el-table-column prop="purchaseNumber" label="采购数量" align="center"></el-table-column>
+              <el-table-column prop="purchasePrice" label="采购单价(元)" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="采购总价(元)" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="入库数量" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="生产厂家" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="入库库房" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="具体位置" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="单价（元）" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="金额（元）" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="附件" align="center"></el-table-column>
+              <el-table-column prop="prop" label="操作" align="center">
+                <template slot-scope="scope">
+                  <el-button type="text">上传附件</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+      </blocks>
+
+      <blocks title="清单（选填，车辆/设备清单）">
+        <el-row :gutter="24">
+          <el-col :span="24">
+            <el-table :data="tableData" style="width: 100%" height="300px" :key="itemKey" border :header-cell-style="{
+                background: 'rgba(250,250,250)',
+                color: 'rgb(50,59,65)',
+                height: '39px',
+                textAlign: 'center',
+              }">
+              <template slot="empty">
+                <img src="@/assets/icon/null.png" alt="" />
+                <p class="empty-p">暂无数据</p>
+              </template>
+              <el-table-column prop="categoryType" label="物资类别" align="center">
+                <template slot-scope="{ row }">
+                  <span>{{ getCategoryName(row.categoryType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="matterName" label="物资类型" align="center"></el-table-column>
+              <el-table-column prop="standards" label="规格型号" align="center" />
+              <el-table-column prop="unit" label="计数编号" align="center" />
+              <el-table-column prop="purchaseNumber" label="出厂唯一编码" align="center"></el-table-column>
+              <el-table-column prop="purchasePrice" label="生产日期" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="到期时间" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="铭牌信息" align="center"></el-table-column>
+              <el-table-column prop="allPrice" label="附件" align="center"></el-table-column>
+              <el-table-column prop="prop" label="操作" align="center">
+                <template slot-scope="scope">
+                  <el-button type="text">上传附件</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+      </blocks>
+    </el-form>
+    <!-- 详情 -->
+    <el-dialog class="tf-dialog" :title="title" :visible.sync="dialogFormVisible" width="1200px" top="60px" style="padding: 10px"
+               append-to-body>
+      <tf-transfer v-if="dialogFormVisible" ref="transfer" :currSelects="tableData"></tf-transfer>
+      <div slot="footer" class="dialog-footer" style="text-align: center">
+        <el-button @click="cancelSubmit" size="small">取 消</el-button>
+        <el-button type="primary" @click="submitData" size="small">提 交</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import blocks from "@/views/mbsys/components/Blocks.vue";
+import examineForm from "@/views/mbsys/components/examineForm.vue";
+import tfTransfer from "@/views/mbsys/components/TFtransfer.vue";
+import upload from "@/views/mbsys/components/upload.vue";
+import { getCompanyAll, getFiles } from "@/api/base";
+import { getMatterTypes, getSupplier } from "@/api/mbsys/materialmanage";
+import { config } from "../../../components/cfgOrderProcess";
+import { parseTime } from "@/utils/index";
+
+export default {
+  components: { blocks, examineForm, upload, tfTransfer },
+  props: {
+    /**
+     * 是否为当前状态
+     */
+    isOpt: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * 当前状态操作方式0：查看，1：新增，2：修改
+     */
+    optionType: {
+      type: Number,
+      required: true,
+    },
+    /**
+     * 当前步骤
+     */
+    step: {
+      type: Object,
+      required: true,
+    },
+    /**
+     * 流程所有
+     */
+    steps: {
+      type: Array,
+      required: true,
+    },
+
+    /**
+     * 流程配置信息
+     */
+    process: {
+      type: Object,
+      required: true,
+    },
+
+    /**
+     * 编辑\查询数据
+     */
+    editData: {
+      type: Object,
+      required: true,
+    },
+    /**
+     * 所有部门和用户
+     */
+    allDeptAndUser: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      config: config,
+      curUser: null,
+      title: "添加物资类型",
+      categoryType: [],
+      form: {
+        name: "", //采购名称
+        supplier: "", //供应商
+        allPrice: 0,
+        personLiable: "",
+        useDept: "",
+        registerTime: "",
+        remark: "", //备注
+      },
+      files: [], //上传附件
+      existsFiles: [], //已上传附件
+      param: {},
+      dialogFormVisible: false,
+      departments: [],
+      tableData: [],
+      suppliers: [],
+      Materials: [],
+      otherCost: [], //其他费用
+      itemKey: 1,
+    };
+  },
+  async created() {
+    if (this.config && this.config.hasOwnProperty("metrialCategories"))
+      this.categoryType = this.config.metrialCategories;
+    //获取部门
+    getCompanyAll().then((res) => {
+      if (res.code == 1) {
+        this.departments = res.result;
+      }
+    });
+    //获取供应商
+    getSupplier({ current: 1, size: 9999 }).then((res) => {
+      if (res.code == 1) {
+        this.suppliers = res.result.records;
+      }
+    });
+    const res = await getSupplier({ current: 1, size: 9999 });
+    this.suppliers = res.result.records;
+    //如果当前状态为可编辑状态获取当前申购部门和申购人
+    if (this.isOpt && JSON.stringify(this.editData) === "{}") {
+      this.curUser = this.$store.state.user;
+      this.form.personLiable = this.curUser.realName;
+      this.form.useDept = parseInt(this.curUser.departmentId);
+      this.form.registerTime = parseTime(new Date(), "{y}-{m}-{d}");
+    } else {
+      this.paramMappingToFrom();
+    }
+  },
+  mounted() { },
+  methods: {
+    /**
+     * 映射出表单参数
+     */
+    paramMappingToFrom() {
+      if (!(JSON.stringify(this.editData) === "{}")) {
+        this.form["name"] = this.editData.name; //采购单名称
+        this.form["useDept"] = this.editData.registerDept; //申购部门
+        this.form["personLiable"] = this.editData.registerStaffName; //申购人
+        this.form["registerTime"] = parseTime(
+          new Date(this.editData.registerTime),
+          "{y}-{m}-{d}"
+        ); //申购时间
+        //this.form["supplier"] = this.editData.supplierId; //供应商
+        //供应商改变
+        //this.changeSupplier(this.editData.supplierId);
+        if (this.editData.hasOwnProperty("supplier")) {
+          this.changeSupplier(this.editData.supplier, "factoryName");
+        }
+        if (this.editData.hasOwnProperty("supplierId")) {
+          this.changeSupplier(this.editData.supplierId, "id");
+        }
+        this.form["allPrice"] = this.editData.totalPrice; //采购合计
+        this.form["remark"] = this.editData.remark; //备注
+        // if(this.editData.hasOwnProperty('currentNode')){
+        //   //其他费用
+        //   if (this.editData.currentNode.hasOwnProperty("detailedVos")) {
+        //     const costs = this.editData.currentNode.detailedVos
+        //     costs.forEach((item) => {
+        //       this.otherCost.push({
+        //         costType: item.costName, //费用类型
+        //         cost: item.amountMoney, //总费用
+        //         remark: item.explain, //备注
+        //         id: item.id, //ID
+        //       });
+        //     });
+        //   }
+        //   //采购明细
+        //   if (this.editData.currentNode.hasOwnProperty("stuffVos")) {
+        //     const stuffVos = this.editData.currentNode.stuffVos
+        //     if (stuffVos.length > 0) {
+        //       getMatterTypes({ current: 1, size: 9999 }).then((res) => {
+        //         let arr = res.result.records.filter((item) =>
+        //           stuffVos.filter((p) => p.id == item.id)
+        //         );
+        //         this.tableData = [];
+        //         res.result.records.forEach((item) => {
+        //           let material = Object.assign({}, item);
+        //           const ma = stuffVos.find((p) => p.matterNodeVo.id == item.id);
+        //           if (ma) {
+        //             material["purchaseNumber"] = ma.quantity; //采购数量
+        //             material["purchasePrice"] = ma.unitPrice; //采购单价
+        //             material["allPrice"] = ma.amountMoney; //采购总价
+        //             material["remark"] = ma.remark; //备注
+        //             this.tableData.push(material);
+        //           }
+        //         });
+        //       });
+        //     }
+        //   }
+        //   //附件
+        //   if (this.editData.currentNode.hasOwnProperty("files")) {
+        //     const files = this.editData.currentNode.files;
+        //     if (files) {
+        //       this.existsFiles = [];
+        //       files.forEach((file) => {
+        //         this.existsFiles.push(file);
+        //       });
+        //     }
+        //   }
+        // }
+
+        if (this.editData.hasOwnProperty("processNodeVos")) {
+          //找到步骤相关数据
+          let processNodeVos = this.editData.processNodeVos.filter(
+            (pn) => pn.processStep == this.step.stepOrder
+          );
+          if (processNodeVos.length > 0) {
+            //其他费用
+            if (processNodeVos[0].hasOwnProperty("detailedVos")) {
+              const costs = processNodeVos[0].detailedVos;
+              costs.forEach((item) => {
+                this.otherCost.push({
+                  costType: item.costName, //费用类型
+                  cost: item.amountMoney, //总费用
+                  remark: item.explain, //备注
+                  id: item.id, //ID
+                });
+              });
+            }
+            //采购明细
+            if (processNodeVos[0].hasOwnProperty("stuffVos")) {
+              const stuffVos = processNodeVos[0].stuffVos;
+              if (stuffVos.length > 0) {
+                getMatterTypes({ current: 1, size: 9999 }).then((res) => {
+                  let arr = res.result.records.filter((item) =>
+                    stuffVos.filter((p) => p.id == item.id)
+                  );
+                  this.tableData = [];
+                  res.result.records.forEach((item) => {
+                    let material = Object.assign({}, item);
+                    const ma = stuffVos.find(
+                      (p) => p.matterNodeVo.id == item.id
+                    );
+                    if (ma) {
+                      material["purchaseNumber"] = ma.quantity; //采购数量
+                      material["purchasePrice"] = ma.unitPrice; //采购单价
+                      material["allPrice"] = ma.amountMoney; //采购总价
+                      material["remark"] = ma.remark; //备注
+                      this.tableData.push(material);
+                    }
+                  });
+                });
+              }
+            }
+            //附件
+            if (processNodeVos[0].hasOwnProperty("files")) {
+              const files = processNodeVos[0].files;
+              if (files) {
+                this.existsFiles = [];
+                files.forEach((file) => {
+                  this.existsFiles.push(file);
+                });
+              }
+            }
+          }
+        }
+      }
+    },
+
+    /**
+     * 申购时间改变
+     */
+    registerTimeChange(value) {
+      this.form.registerTime = parseTime(new Date(value), "{y}-{m}-{d}"); //申购时间
+    },
+    /**
+     * 根据物资类别编号获取物资类别名称
+     */
+    getCategoryName(code) {
+      const obj = this.categoryType.find((item) => item.code == code);
+      return obj.name;
+    },
+    /**
+     * 供应商改变
+     */
+    changeSupplier(value, field) {
+      const supplier = this.suppliers.find((item) => item[field] === value);
+      if (supplier) {
+        this.form["supplier"] = supplier.id;
+        this.form["contacts"] = supplier.contacts;
+        this.form["contactNumber"] = supplier.contactNumber;
+        this.form["factoryName"] = supplier.factoryName;
+      }
+    },
+    /***
+     * 删除物料信息
+     */
+    delMaterial(row) {
+      this.tableData = this.tableData.filter((item) => item.id != row.id);
+      this.calculationAllPrice();
+    },
+    /**
+     * 获取上传的附件
+     */
+    getFiles() {
+      return this.$refs["upload"].submitFiles();
+    },
+
+    /**
+     * 添加其他费用
+     */
+    addOtherCost() {
+      this.otherCost.push({
+        costType: "",
+        cost: 0,
+        remark: "",
+      });
+    },
+    /**
+     * 删除费用
+     */
+    delOtherCost(row, index) {
+      this.otherCost = this.otherCost.filter(
+        (item) => !(item.costType === row.costType && item.cost === row.cost)
+      );
+      this.calculationAllPrice();
+    },
+    /**
+     * 获取上传的审核信息
+     */
+    getExamineInfo() {
+      return this.$refs["examine"].submitForm();
+    },
+    submitData() {
+      this.dialogFormVisible = false;
+      this.tableData = this.$refs.transfer.submitData();
+    },
+
+    /**
+     * 物资类型数量改变
+     */
+    changeNumber(value, row) {
+      let fValue = parseInt(value == null || value == "" ? 0 : value);
+      if (!fValue) fValue = 0;
+      this.tableData.forEach((item) => {
+        if (item.id === row.id) {
+          item.purchaseNumber = fValue;
+          if (item.hasOwnProperty("purchasePrice")) {
+            item["allPrice"] = parseFloat(fValue * item.purchasePrice).toFixed(
+              2
+            );
+          }
+          this.itemKey = Math.random();
+        }
+      });
+      this.calculationAllPrice();
+    },
+
+    /**
+     * 物资类型单价改变
+     */
+    changePrice(value, row) {
+      let fValue = parseFloat(value).toFixed(2);
+      if (fValue == "NaN") fValue = 0;
+      this.tableData.forEach((item) => {
+        if (item.id === row.id) {
+          item.purchasePrice = fValue;
+          if (item.hasOwnProperty("purchaseNumber")) {
+            item["allPrice"] = parseFloat(fValue * item.purchaseNumber).toFixed(
+              2
+            );
+          }
+          this.itemKey = Math.random();
+        }
+      });
+      this.calculationAllPrice();
+    },
+
+    /**
+     * 其他费用价格改变
+     */
+    costChange(value, row, index) {
+      const fValue = parseFloat(value).toFixed(2);
+      this.otherCost[index].cost = fValue;
+      this.calculationAllPrice();
+    },
+    /**
+     * 计算总价
+     */
+    calculationAllPrice() {
+      this.form["allPrice"] = 0;
+      let allPrice = 0;
+      this.tableData.forEach((item) => {
+        if (item.hasOwnProperty("allPrice"))
+          allPrice += parseFloat(item.allPrice);
+      });
+      this.otherCost.forEach((item) => {
+        if (item.hasOwnProperty("cost")) allPrice += parseFloat(item.cost);
+      });
+      this.form["allPrice"] = allPrice.toFixed(2);
+    },
+
+    /**
+     * 取消按钮事件
+     */
+    cancelSubmit() {
+      this.dialogFormVisible = false;
+    },
+
+    /**
+     * 提交表单数据
+     */
+    submitForm() {
+      const files = this.$refs["upload"].submitFiles();
+      const examine = this.$refs["examine"].submitForm();
+      let existsFilesId = "";
+      this.existsFiles.forEach((item, index) => {
+        existsFilesId =
+          existsFilesId +
+          (index < this.existsFiles - 1 ? item.id + "," : item.id);
+      });
+      return {
+        form: this.form,
+        otherCost: this.otherCost,
+        metrials: this.tableData,
+        existsFilesId: existsFilesId,
+        files: files,
+        examine: examine,
+      };
+    },
+    /**
+     * 下载文件
+     * @file 文件信息
+     */
+    downloadFile(file) {
+      if (
+        file &&
+        file.hasOwnProperty("filePath") &&
+        file.hasOwnProperty("fileName")
+      ) {
+        const token = this.$store.state.user.token;
+        const fileName = file.fileName;
+        getFiles({
+          access_token: token,
+          fileName: fileName,
+          remotePath: file.filepath,
+        }).then((src) => {
+          const reader = new FileReader();
+          reader.readAsDataURL(src);
+          reader.onload = (e) => {
+            const a = document.createElement("a");
+            a.download = fileName;
+            // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+            a.href = e.target.result;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+          };
+        });
+      }
+    },
+
+    /**
+     * 删除文件
+     * @file 文件信息
+     */
+    deleteFile(file) {
+      this.$confirm(
+        "此操作将永久删除【" + file.fileName + "】文件, 是否继续?",
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.existsFiles = this.existsFiles.filter(
+            (item) => item.id != file.id
+          );
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+  bottom: 0;
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+
+  .addBtn {
+    height: 30px;
+    font-size: 22px;
+    color: #409eff;
+    font-weight: bold;
+    text-align: center;
+    border: 1px solid #ebeef5;
+    border-top: 0px;
+    cursor: pointer;
+  }
+  .addBtn:hover {
+    background: #ebeef5;
+  }
+
+  .tf-input-table {
+    >>> .el-table__body-wrapper {
+      max-height: 110px;
+      overflow-y: auto !important;
+    }
+  }
+
+  .tf-input-border {
+    >>> input {
+      border: 0 solid;
+    }
+  }
+
+  .tf-col {
+    .file {
+      border: 1px solid #ebeef5;
+      height: 40px;
+      width: calc(100% - 20px);
+      .file-name {
+        width: calc(100% - 40px);
+        float: left;
+        padding: 0 10px;
+        height: 40px;
+        line-height: 40px;
+      }
+      .file-name:hover {
+        background-color: #ebeef5;
+        cursor: pointer;
+      }
+      .btn-file {
+        width: 40px;
+        float: left;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        background-color: #ebeef5;
+      }
+      .btn-file:hover {
+        color: #abbac7;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+.el-dialog__wrapper {
+  >>> .el-form-item {
+    margin-bottom: 15px !important;
+  }
+  .item-title {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 10px;
+    font-weight: 600;
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 5px;
+      height: 18px;
+      vertical-align: text-bottom;
+      background-color: #2d74e7;
+      margin-right: 5px;
+    }
+  }
+}
+.tf-dialog {
+  >>> .el-dialog__header {
+    background: #2d74e7;
+    .el-dialog__title {
+      color: aliceblue !important;
+    }
+    .el-dialog__close {
+      color: aliceblue !important;
+    }
+  }
+  >>> .el-dialog__body {
+    padding: 10px;
+  }
+}
+</style>

src/views/mbsys/materialmanage/materialputinManage/purchaseSupervise/index.vue

@@ -0,0 +1,814 @@
+<template>
+  <!-- 采购督办 -->
+  <div class="content-container">
+    <div class="top">
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="form"
+        label-width="auto"
+        style="float: left"
+      >
+        <el-form-item label="关键字:">
+          <el-input
+            v-model="form.content"
+            size="small"
+            placeholder="请输入采购单号、采购名称"
+            style="width: 220px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="供应商:">
+          <el-select
+            v-model="form.supplierId"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in suppliers"
+              :key="item.id"
+              :label="item.factoryName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="申购部门:">
+          <el-select
+            v-model="form.registerDept"
+            filterable
+            clearable
+            collapse-tags
+            placeholder="请选择供应商"
+            size="small"
+          >
+            <el-option
+              v-for="item in allDept"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="申购时间:">
+          <el-date-picker
+            v-model="form.purchaseTime"
+            type="daterange"
+            align="right"
+            value-format="yyyy-MM-DD"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            size="small"
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="small"
+          @click="queryProcess"
+          style="margin-top:4px"
+          >查询</el-button
+        >
+      </el-form>
+    </div>
+    <div class="table-div">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :style="{ width: '100%' }"
+        height="100%"
+        border
+        :header-cell-style="{
+          background: 'rgba(250,250,250)',
+          color: 'rgb(50,59,65)',
+          height: '39px',
+          textAlign: 'center',
+        }"
+      >
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="" />
+          <p class="empty-p">暂无数据</p>
+        </template>
+        <el-table-column label="序号" align="center" width="60px">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="processNumber"
+          label="采购单号"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="采购单名称"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="processState" label="工单状态" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getOrderStateNameById(row.processState) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="processNodeName" label="当前步骤" align="center">
+          <template slot-scope="{ row }">
+            <span>{{
+              row.processNodeName +
+              "(" +
+              row.processNode +
+              "/" +
+              row.sumNode +
+              ")"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="handleDeptName"
+          label="当前处理部门"
+          align="center"
+        >
+          <template slot-scope="{ row }">
+            <span>{{
+              row.handleDeptName == null || row.handleDeptName == ""
+                ? "/"
+                : row.handleDeptName
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="handleStaffName"
+          label="当前处理人"
+          align="center"
+        >
+          <template slot-scope="{ row }">
+            <span>{{
+              row.handleStaffName == null || row.handleStaffName == ""
+                ? "/"
+                : row.handleStaffName
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="urgeNumber" label="催办消息" align="center">
+          <template slot-scope="{ row }">
+            <el-popover
+              v-if="row.urgeNumber > 0"
+              placement="bottom"
+              title=""
+              width="280"
+              trigger="hover"
+              :content="row.urgeInfo"
+            >
+              <p v-for="(urge,ind) in row.urgeInfo" :key="ind">{{ urge }}</p>
+              <span slot="reference">{{ row.urgeNumber }}</span>
+            </el-popover>
+            <span v-else>{{ row.urgeNumber }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerDept" label="申购部门" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getDeptName(row.registerDept) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="registerStaff" label="申购人" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ getUserName(row.registerDept, row.registerStaff) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="registerTime"
+          label="申购时间"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="supplier"
+          label="供应商"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="totalPrice"
+          label="采购价格合计(元)"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+          align="center"
+        ></el-table-column>
+        <el-table-column prop="prop" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button
+              @click="queryOrderProcessById(scope.row, false)"
+              icon="el-icon-tickets"
+              title="查看"
+              type="text"
+              size="small"
+              style="font-size: 16px"
+            ></el-button>
+            <el-button
+              @click="urgeHandle(scope.row)"
+              icon="el-icon-bell"
+              title="催办"
+              type="text"
+              size="small"
+              style="font-size: 16px; color: #ffa862"
+            ></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      :current-page="pagination.current"
+      :page-sizes="[20, 30, 50, 100, 200]"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @size-change="queryProcess"
+      @current-change="queryProcess"
+      layout="total, sizes, prev, pager, next, jumper"
+    />
+    <!-- 详情 -->
+    <el-dialog
+      class="tf-dialog"
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      width="1200px"
+      top="60px"
+      style="padding: 10px"
+    >
+      <process-order
+        v-if="dialogFormVisible"
+        ref="merge"
+        :orderName="orderName"
+        :orderCode="orderCode"
+        :businessType="businessType"
+        :proId="processId"
+        :optionType="optionType"
+        :editData="editData"
+        :comps="compts"
+        @remind="remind"
+      ></process-order>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small"
+          >取 消</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          @click="preserveHandler(0)"
+          size="small"
+          >保 存</el-button
+        >
+        <el-button
+          v-if="optionType != 0"
+          type="primary"
+          @click="preserveHandler(1)"
+          size="small"
+          >提 交</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAllUserInfo } from "@/api/base";
+import { getMatterTypes } from "@/api/mbsys/materialmanage";
+import {
+  getTypetree,
+  getProcessPageList,
+  queryProcessPage,
+  qOrderProcessById,
+  examineProcess,
+  addSupervise,
+  querySupervisePage,
+} from "@/api/process/process";
+import { getSupplier } from "@/api/mbsys/materialmanage";
+import { config } from "../../../components/cfgOrderProcess";
+import processOrder from "@/views/mbsys/publicOrder/orderProcess/detail";
+import { publicComponents } from "../processForm/config";
+import { resolve } from "q";
+export default {
+  components: { processOrder },
+  data() {
+    return {
+      config: config,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      allDept: [], //所有部门
+      curUser: null, //当前登录人
+      orderName: "物料采购单", //工单名称
+      orderCode: "", //工单编号
+      suppliers: [], //供应商
+      form: {
+        content: "", //关键字
+        supplierId: "", //供应商
+        registerDept:"",//申购部门
+        purchaseTime: [], //申购时间
+      },
+      tableData: [],
+      metrialCategories: [], //物资类别
+      title: "",
+      materialTypes: [],
+      selectMaterialTypes: [],
+      pagination: { current: 1, size: 20, total: 0 },
+      dialogFormVisible: false,
+      curProcess: null,
+      businessType: null, //业务类型
+      optionType: 0, //操作类型 0：查看，1：新增，2：修改
+      editData: {}, //操作数据
+      processId: 0, //流程ID
+      compts: publicComponents,
+      curEditRow: null, //当前操作数据
+    };
+  },
+
+  async created() {
+    this.curUser = this.$store.state.user;
+    /**
+     * 查询所有用户所有部门
+     */
+    this.allDept = await this.getDeptAndUser();
+    if (this.config && this.config.hasOwnProperty("metrialCategories"))
+      this.metrialCategories = this.config.metrialCategories;
+    //获取供应商
+    getSupplier({ current: 1, size: 9999 }).then((res) => {
+      if (res.code) {
+        this.suppliers = res.result.records;
+      }
+    });
+    /**
+     * 获取分类下的类型
+     */
+    let params = { current: 1, size: 999 };
+    getMatterTypes(params).then((res) => {
+      this.materialTypes = res.result.records;
+      this.selectMaterialTypes = this.materialTypes.filter((p) => true);
+    });
+    //获取业务类别
+    getTypetree({ datatypes: 0, id: "" })
+      .then((res) => {
+        if (res.code === 1) {
+          if (res.result.length > 0)
+            if (res.result[0].vos.length > 1)
+              this.businessTypes = res.result[0].vos[0].vos;
+        }
+      })
+      .catch((ex) => {
+        this.$message.error("获取数据出错！");
+      });
+    this.getProcess();
+  },
+  mounted() {
+    //this.queryProcess();
+  },
+  methods: {
+    async getDeptAndUser() {
+      return new Promise((resolve) => {
+        getAllUserInfo().then((res) => {
+          const data = res.result;
+          for (const i in data) {
+            data[i].value = data[i].id;
+            data[i].label = data[i].name;
+            if (data[i].users) {
+              data[i].children = data[i].users;
+              for (const j in data[i].children) {
+                data[i].children[j].value = data[i].children[j].id;
+                data[i].children[j].label = data[i].children[j].realName;
+              }
+            }
+          }
+          resolve(data);
+        });
+      });
+    },
+    /**
+     * 根据部门ID获取部门名称
+     */
+    getDeptName(deptId) {
+      if (this.allDept.length > 0) {
+        const dept = this.allDept.find((item) => item.id == deptId);
+        if (dept) return dept.name;
+        else deptId;
+      } else return deptId;
+    },
+    /**
+     * 根据部门ID和人员id获取人员名称
+     */
+    getUserName(deptId, userId) {
+      if (this.allDept.length > 0) {
+        const dept = this.allDept.find((item) => item.id == deptId);
+        if (dept) {
+          const user = dept.users.find((p) => p.id == userId);
+          if (user) return user.realName;
+          else return userId;
+        } else return userId;
+      } else return userId;
+    },
+    /**
+     * 根据id获取工单状态
+     */
+    getOrderStateNameById(id) {
+      if (this.config && this.config.hasOwnProperty("orderState")) {
+        const obj = this.config.orderState.find((item) => item.key === id);
+        if (obj) return obj.value;
+        else return id;
+      } else {
+        return id;
+      }
+    },
+
+    /**
+     * 查询工单列表
+     */
+    queryProcess() {
+      //带入当前登录人查询
+      //ywType 业务类型，基础类型
+      //configId 流程类型
+      //handleStaff 当前处理人
+      //processState 工单状态：1草稿、2处理、3终止、4处理完成
+      //supervisor 督办人ID，与督办人部门同时填充，单独无效
+      //upervisorDept 督办人部门ID,与督办人id同时填充，单独无效
+      let params = Object.assign(
+        {
+          ywType: this.businessType,
+          configId: this.processId,
+          supervisor: this.curUser.userId,
+          upervisorDept: this.curUser.departmentId,
+          processState: 2,
+        },
+        this.pagination
+      );
+      if (this.form.content != "")
+        Object.assign(params, { content: this.form.content })
+      //供应商
+      if (this.form.supplierId != "")
+        Object.assign(params, { supplierId: this.form.supplierId })
+      //申购部门
+      if(this.form.registerDept !="")
+        Object.assign(params, { registerDept: this.form.registerDept })
+      //申购时间
+      if(this.form.purchaseTime.length > 1){
+        Object.assign(params, { endTime: this.form.purchaseTime[0] + " 00:00:00",stratTime: this.form.purchaseTime[1]} + " 23:59:59")
+      }
+      queryProcessPage(params).then((res) => {
+        if (res.code == 1) {
+          //this.tableData = res.result.records
+          this.pagination.total = res.result.total
+          this.getUrgeInfo(res.result.records)
+        }
+      });
+    },
+
+    /**
+     * 查询列表数据
+     */
+    getProcess() {
+      let data = {
+        current: 1,
+        size: 999,
+      };
+      getProcessPageList(data)
+        .then((res) => {
+          this.curProcess = res.result.records.find(
+            (item) => item.processNumber === "CGLC"
+          );
+          if (this.curProcess) {
+            //this.getProcessById(this.curProcess.id);
+            this.processId = this.curProcess.id;
+            this.businessType = this.curProcess.hasOwnProperty("processType")
+              ? this.curProcess.processType
+              : null;
+          }
+          this.queryProcess();
+        })
+        .catch((ex) => {
+          this.$message.error("获取流程列表失败！");
+        });
+    },
+
+    // 提示
+    remind(data) {
+      this.dialogFormVisible = false;
+      //设置初始操作类型
+      this.optionType = 1;
+      this.queryProcess();
+    },
+
+    /**
+     * 通过id查询工单流程信息
+     * @row 查询数据
+     * @type 操作类型 false：查看，true：审核
+     */
+    queryOrderProcessById(row, type) {
+      this.curEditRow = type ? row : null;
+      qOrderProcessById(row.id).then((res) => {
+        if (res.code == 1) {
+          this.title = type ? "采购单-审核" : "采购单-详情";
+          this.optionType = type ? 2 : 0; ////操作类型 0：查看，1：新增，2：修改
+          this.editData = res.result;
+          this.dialogFormVisible = true;
+        }
+      });
+    },
+
+    /**
+     * 督办事件
+     */
+    urgeHandle(row) {
+      this.$prompt("备注", "催办", {
+        customClass: "tf-urge-prompt",
+        confirmButtonText: "催办",
+        cancelButtonText: "取消",
+        inputType: "text",
+        inputValidator: (value) => {
+          return value.length > 30 || value.length == 0 ? false : true;
+        },
+        inputErrorMessage: "催办消息不能为空,且不能超过30个",
+      })
+        .then(({ value }) => {
+          let data = {
+            nodeBranch: row.nodeBranch, //流程节点分支
+            opinion: "", //意见
+            processId: row.id, //流程ID
+            processNode: row.processNode, //流程节点
+            remark: value, //备注
+            superviseDept: parseInt(this.curUser.departmentId), //督办部门
+            superviseStaff: this.curUser.userId, //督办人
+          };
+          this.addSupervise(data);
+        })
+        .catch(() => {});
+    },
+
+    /**
+     * 提交督办信息
+     */
+    addSupervise(data) {
+      addSupervise(data)
+        .then((res) => {
+          if (res.code == 1) {
+            this.$message.success("催办成功！");
+            this.queryProcess();
+          } else {
+            this.$message.error("催办失败！");
+          }
+        })
+        .catch((ex) => {
+          this.$message.error("催办失败！");
+        });
+    },
+
+    /**
+     * 获取催办消息
+     */
+    async getUrgeInfo(data) {
+      // this.tableData.forEach((row) => {
+        
+      // });
+      let tableList = data;
+      for(let i = 0 ; i < tableList.length;i++){
+        tableList[i]['urgeInfo'] = ''
+        if (tableList[i].urgeNumber > 0) {
+          let data = {
+            processId: tableList[i].id, //流程ID
+            nodeBranch: tableList[i].nodeBranch, //流程节点分支
+            processNode: tableList[i].processNode, //流程节点
+            superviseDept: parseInt(this.curUser.departmentId), //督办部门
+            superviseStaff: this.curUser.userId, //督办人
+          };
+          const res = await this.querySupervisePage(data)
+          
+          let result = []
+          if (res) {
+            res.result.records.forEach((item) => {
+              const dept = this.getDeptName(item.handleDept);
+              result.push(item.createTime +" " + dept +" " + item.createUserName + " " +item.remark)   
+            });
+          }
+
+          tableList[i]['urgeInfo'] = result
+        }
+      }
+      this.tableData = tableList
+    },
+
+    async getContent(row) {
+      let data = {
+        processId: row.id, //流程ID
+        nodeBranch: row.nodeBranch, //流程节点分支
+        processNode: row.processNode, //流程节点
+        superviseDept: parseInt(this.curUser.departmentId), //督办部门
+        superviseStaff: this.curUser.userId, //督办人
+      };
+      const res = await this.querySupervisePage(data);
+      let result = "";
+      if (res) {
+        res.result.records.forEach((item) => {
+          const dept = this.getDeptName(item.handleDept);
+          result =
+            result +
+            item.createTime +
+            " " +
+            dept +
+            " " +
+            item.createUserName +
+            " " +
+            item.remark +
+            "\r\n";
+        });
+      }
+      return result;
+    },
+
+    async querySupervisePage(data) {
+      return new Promise((resolve) => {
+        querySupervisePage(data).then((res) => {
+          if (res.code == 1) {
+            resolve(res);
+          } else {
+            resolve(null);
+          }
+        });
+      });
+    },
+
+    /**
+     * 新增工单流程信息
+     */
+    examineProcessOrder(param) {
+      examineProcess(param).then((res) => {
+        if (res.code == 1) {
+          this.queryProcess();
+          this.$message.success("新增采购单成功!");
+        }
+      });
+    },
+
+    /**
+     * 提交数据
+     * @state 操作状态  保存为0，提交为1
+     */
+    preserveHandler(state) {
+      let params = this.$refs.merge.submitForm();
+      console.log("提交数据", params);
+      //处理提交参数到接口参数映射
+      let data = this.formParamMapping(params, state);
+      this.examineProcessOrder(data);
+    },
+    /**
+     * 表单参数映射到提交参数
+     */
+    formParamMapping(data, state) {
+      let params = {
+        handleResults: 0, //处理结果0:不处理；1:同意；2:不同意
+        operateState: 0, //表单类型：0、其它； 1、采购入库（关联采购工单）；2、余料退库（关联出库工单）；3、工程出库（关联工程工单）；4其它出库；5、维修出库（关联维修工单）
+        processStep: data.curProcessStep, //当前流程步骤
+        stepNode: data.curStepNode, //当前步骤结点
+        headleState: data.headleState, //处理状态：1提交;2:驳回;3:转派;4:终止;
+        remark: data.remarks, //当前处理意见
+        saveState: state, //0保存，1提交
+      };
+      const nextProcess = (data.processStep + "").split(",");
+      const nextStep = {
+        //下一步
+        dept: data.dept, //部门
+        deptStaff: data.deptStaff, //人员
+        processStep:
+          nextProcess && nextProcess.length > 0
+            ? parseInt(nextProcess[0])
+            : data.curProcessStep, //流程步骤
+        stepNode:
+          nextProcess && nextProcess.length > 1
+            ? parseInt(nextProcess[1])
+            : data.stepNode, //步骤结点
+      };
+
+      let formData = new FormData();
+      if (this.curEditRow != null)
+        Object.assign(params, { processId: this.curEditRow.id }); //流程ID
+      //表单字段
+      if (data.hasOwnProperty("configId")) {
+        params = Object.assign(params, { configId: data.configId }); //流程配置ID
+      }
+      Object.assign(params, { nextStep: nextStep });
+      const json = JSON.stringify(params);
+      // 将 json 字符串转化为 Blob 对象
+      const blob = new Blob([json], {
+        type: "application/json",
+      });
+      formData.append("dto", blob);
+      //文件
+      if (data.hasOwnProperty("files")) {
+        let files = [];
+        data.files.forEach((file, index) => {
+          formData.append("fileList", file.file);
+        });
+      }
+      return formData;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+
+  .top {
+    height: 33px;
+    margin-bottom: 10px;
+    text-align: right;
+
+    .el-form .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .upload-demo {
+      display: inline-block;
+    }
+  }
+
+  .table-div {
+    height: calc(100% - 87px);
+  }
+
+  .el-pagination {
+    margin-top: 16px;
+  }
+}
+
+>>> .tf-urge-prompt {
+  >>> .el-message-box__header {
+    background: #2d74e7;
+  }
+}
+
+.el-table {
+  >>> .el-table__body {
+    tr {
+      &:nth-child(2n) {
+        background-color: #f0f9eb;
+      }
+      td {
+        height: 23px;
+        line-height: 23px;
+        padding: 2px 1px !important;
+        .el-button {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+.tf-dialog {
+  >>> .el-dialog__header {
+    background: #2d74e7;
+    .el-dialog__title {
+      color: aliceblue !important;
+    }
+    .el-dialog__close {
+      color: aliceblue !important;
+    }
+  }
+}
+</style>

src/views/mbsys/materialmanage/purchasemanage/supplier/index.vue

@@ -100,7 +100,7 @@ export default {
     return {
       queryForm: {},
       form: {},
-      tableData: [{ prop: '' }, { prop: '' }, { prop: '' }],
+      tableData: [],
       pagination: { current: 1, size: 20, total: 0 },
       dialogFormVisible: false,
       readonly: false

src/views/mbsys/watersupply/emergencymanage/emergencyplan/children/addfacilities.vue

@@ -0,0 +1,223 @@
+<template>
+  <el-dialog title="添加设施信息" :visible.sync="dialogVisible" width="1200px" append-to-body>
+    <div class="c-div">
+      <el-row :gutter="24">
+        <el-col class="box" :span="12">
+          <div class="box-content">
+            <div class="top">
+              <el-form ref="form" :model="form" :inline="true" style="float: left; height: 45px">
+                <el-form-item label="设施名称" label-width="auto">
+                  <el-input v-model="form.name" size="small" placeholder="请输入姓名" style="width: 180px;" clearable></el-input>
+                </el-form-item>
+                <el-form-item label-width="auto">
+                  <el-button type="primary" icon="el-icon-search" size="small" style="margin-top: 4px;">搜索</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+            <el-table ref="multipleTable" :data="tableData" :style="{ width: '100%' }" height="300px" @select-all="selectAll"
+                      :header-cell-style="{background: 'rgba(250,250,250)', color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}"
+                      style="width: 100%" @select="rowSelect">
+              <template slot="empty">
+                <img src="@/assets/icon/null.png" alt="" />
+                <p class="empty-p">暂无数据</p>
+              </template>
+              <el-table-column type="selection" align="center" width="50"></el-table-column>
+              <el-table-column prop="name" align="center" label="设施名称"></el-table-column>
+              <el-table-column prop="unit" align="center" label="单位"></el-table-column>
+              <el-table-column prop="remark" align="center" label="备注"></el-table-column>
+            </el-table>
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
+                           :page-sizes="[5,20, 30, 40, 50, 100, 200]" :page-size="pagination.size"
+                           layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" small>
+            </el-pagination>
+          </div>
+        </el-col>
+        <el-col class="box" :span="12">
+          <div class="box-content">
+            <div class="top">
+              <div class="h-title">已选设施</div>
+            </div>
+            <el-table :data="selectTableData" :style="{ width: '100%' }" height="332px" :header-cell-style="{background: 'rgba(250,250,250)',
+                  color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" style="width: 100%">
+              <template slot="empty">
+                <img src="@/assets/icon/null.png" alt="" />
+                <p class="empty-p">暂无数据</p>
+              </template>
+              <el-table-column align="center" label="序号">
+                <template slot-scope="scope">{{scope.$index+1}}</template>
+              </el-table-column>
+              <el-table-column prop="name" align="center" label="设施名称"></el-table-column>
+              <el-table-column prop="unit" align="center" label="单位"></el-table-column>
+              <el-table-column prop="remark" align="center" label="备注"></el-table-column>
+              <el-table-column align="center" label="操作">
+                <template slot-scope="{row}">
+                  <el-button type="text" icon="el-icon-delete" style="color:#f40;padding:0" @click="removeItem(row)"></el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="footer">
+      <el-button size="small" @click="dialogVisible = false;selectTableData=[]">取 消</el-button>
+      <el-button size="small" type="primary" @click="selectSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { emergencyfacilities, getEmergencyById } from '@/api/mbsys/watersupply'
+export default {
+  props: ['visible'],
+  data() {
+    return {
+      dialogVisible: false,
+      tableData: [],
+      selectTableData: [],
+      form: {},
+      pagination: { current: 1, size: 20, total: 0 }
+    }
+  },
+  watch: {
+    visible(val, oldVal) {
+      this.dialogVisible = val
+    }
+  },
+  mounted() {
+    this.emergencyfacilities()
+  },
+  methods: {
+    open(data = null) {
+      this.dialogVisible = true
+      this.$refs.multipleTable.clearSelection();
+      this.selectTableData = []
+      if (data) {
+        this.selectTableData = JSON.parse(JSON.stringify(data))
+        this.checkSelected()
+      }
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    /**
+     * 获取人员列表
+     */
+    emergencyfacilities() {
+      let params1 = JSON.parse(JSON.stringify(this.form));
+      let params2 = JSON.parse(JSON.stringify(this.pagination));
+      let params3 = { ...params1, ...params2 };
+      emergencyfacilities(params3).then((res) => {
+        if (res.code === 1) {
+          this.tableData = res.result.records;
+          this.pagination.total = res.result.total;
+          this.checkSelected()
+        }
+      });
+    },
+    /**
+     * 检查是否已经选择
+     */
+    checkSelected() {
+      // 回显已经选择的
+      this.$nextTick(() => {
+        this.tableData.forEach(row => {
+          // 检查是否已经选择
+          const selected = this.selectTableData.some(item => {
+            if (item.id == row.id) return true
+          })
+          if (selected) this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      })
+    },
+    handleSizeChange(size) {
+      this.pagination.size = size;
+      this.emergencyfacilities();
+    },
+    handleCurrentChange(current) {
+      this.pagination.current = current;
+      this.emergencyfacilities();
+    },
+    /**
+     * 选择
+     */
+    rowSelect(selection, row) {
+      // 判断是否选中
+      const checked = selection.some(item => {
+        if (item.id == row.id) return true
+      })
+      if (checked) {
+        this.selectTableData.push(row)
+      } else {
+        this.selectTableData = this.selectTableData.filter(item => item.id != row.id)
+      }
+    },
+    /**
+     * 全选
+     */
+    selectAll(selection) {
+      console.log('输出：', selection)
+      this.selectTableData = JSON.parse(JSON.stringify(selection))
+    },
+    /**
+     * 移除行
+     */
+    removeItem(row) {
+      this.selectTableData = this.selectTableData.filter(item => item.id != row.id)
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    /**
+     * 
+     */
+    selectSubmit() {
+      this.$emit("selected", this.selectTableData)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog__wrapper {
+  >>> .box {
+    // border: 1px solid #ccc;
+    padding: 0 5px !important;
+    box-sizing: border-box;
+    .top {
+      width: 100%;
+      height: 45px;
+      // line-height: 45px;
+    }
+    .box-content {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #e2e2e2;
+      border-radius: 3px;
+      box-sizing: border-box;
+      padding: 10px;
+      .el-table--border::after,
+      .el-table--group::after,
+      .el-table::before {
+        background-color: transparent;
+      }
+      .h-title {
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        margin-bottom: 10px;
+        &::before {
+          content: "";
+          display: inline-block;
+          width: 6px;
+          height: 18px;
+          vertical-align: sub;
+          background-color: #70b603;
+          margin-right: 5px;
+        }
+        >>> .el-button span {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/mbsys/watersupply/emergencymanage/emergencyplan/children/addperson.vue

@@ -17,7 +17,7 @@
                 </el-form-item>
               </el-form>
             </div>
-            <el-table ref="multipleTable" :data="tableData" :style="{ width: '100%' }" height="300px"
+            <el-table ref="multipleTable" :data="tableData" :style="{ width: '100%' }" height="300px" @select-all="selectAll"
                       :header-cell-style="{background: 'rgba(250,250,250)', color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}"
                       style="width: 100%" @select="rowSelect">
               <template slot="empty">
@@ -83,15 +83,21 @@ export default {
   },
   watch: {
     visible(val, oldVal) {
-      this.dialogVisible = this.visible
+      this.dialogVisible = val
     }
   },
   mounted() {
     this.getEmergencyStaff()
   },
   methods: {
-    open() {
+    open(data = null) {
       this.dialogVisible = true
+      this.$refs.multipleTable.clearSelection();
+      this.selectTableData = []
+      if (data) {
+        this.selectTableData = JSON.parse(JSON.stringify(data))
+        this.checkSelected()
+      }
     },
     close() {
       this.dialogVisible = false
@@ -107,19 +113,25 @@ export default {
         if (res.code === 1) {
           this.tableData = res.result.records;
           this.pagination.total = res.result.total;
-          // 回显已经选择的
-          this.$nextTick(() => {
-            this.tableData.forEach(row => {
-              // 检查是否已经选择
-              const selected = this.selectTableData.some(item => {
-                if (item.id == row.id) return true
-              })
-              if (selected) this.$refs.multipleTable.toggleRowSelection(row);
-            });
-          })
+          this.checkSelected()
         }
       });
     },
+    /**
+     * 检查是否已经选择
+     */
+    checkSelected() {
+      // 回显已经选择的
+      this.$nextTick(() => {
+        this.tableData.forEach(row => {
+          // 检查是否已经选择
+          const selected = this.selectTableData.some(item => {
+            if (item.id == row.id) return true
+          })
+          if (selected) this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      })
+    },
     handleSizeChange(size) {
       this.pagination.size = size;
       this.getEmergencyStaff();
@@ -142,6 +154,13 @@ export default {
         this.selectTableData = this.selectTableData.filter(item => item.id != row.id)
       }
     },
+    /**
+     * 全选
+     */
+    selectAll(selection) {
+      console.log('输出：', selection)
+      this.selectTableData = JSON.parse(JSON.stringify(selection))
+    },
     /**
      * 移除行
      */
@@ -152,8 +171,8 @@ export default {
     /**
      * 
      */
-    selectSubmit(){
-      
+    selectSubmit() {
+      this.$emit("selected", this.selectTableData)
     }
   }
 }

src/views/mbsys/watersupply/emergencymanage/emergencyplan/children/addsupply.vue

@@ -0,0 +1,252 @@
+<template>
+  <el-dialog title="添加物资信息" :visible.sync="dialogVisible" width="1200px" append-to-body>
+    <div class="c-div">
+      <el-row :gutter="24">
+        <el-col class="box" :span="12">
+          <div class="box-content">
+            <div class="top">
+              <el-form ref="form" :model="form" :inline="true" style="float: left; height: 45px">
+                <el-form-item label="关键字" label-width="auto">
+                  <el-input v-model="form.name" size="small" placeholder="物资分类、类型、规格型号" style="width: 220px;" clearable></el-input>
+                </el-form-item>
+                <el-form-item label="物资类别" label-width="auto">
+                  <el-input v-model="form.name" size="small" placeholder="物资类别" style="width: 180px;" clearable></el-input>
+                </el-form-item>
+                <el-form-item label-width="auto">
+                  <el-button type="primary" icon="el-icon-search" size="small" style="margin-top: 4px;">搜索</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+            <el-table ref="multipleTable" :data="tableData" :style="{ width: '100%' }" height="300px" @select-all="selectAll"
+                      :header-cell-style="{background: 'rgba(250,250,250)', color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}"
+                      style="width: 100%" @select="rowSelect">
+              <template slot="empty">
+                <img src="@/assets/icon/null.png" alt="" />
+                <p class="empty-p">暂无数据</p>
+              </template>
+              <el-table-column type="selection" align="center" width="50"></el-table-column>
+              <el-table-column prop="dept" align="center" label="物资分类">
+                  <template slot-scope="{row}">
+                      <span v-if="row.level1">{{row.level1}}</span>
+                      <span v-else-if="row.level2">{{row.level2}}</span>
+                      <span v-else>{{row.level3}}</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="matterName" align="center" label="物资类型名称"></el-table-column>
+              <el-table-column prop="standards" align="center" label="规格型号"></el-table-column>
+              <el-table-column prop="unit" align="center" label="单位"></el-table-column>
+              <el-table-column prop="name" align="center" label="物资类别">
+                  <template slot-scope="{row}">
+                <span>{{['设备类','车辆类','耗材类'][row.categoryType-1]}}</span>
+              </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
+                           :page-sizes="[5,20, 30, 40, 50, 100, 200]" :page-size="pagination.size"
+                           layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" small>
+            </el-pagination>
+          </div>
+        </el-col>
+        <el-col class="box" :span="12">
+          <div class="box-content">
+            <div class="top">
+              <div class="h-title">已选物资类型</div>
+            </div>
+            <el-table :data="selectTableData" :style="{ width: '100%' }" height="332px" :header-cell-style="{background: 'rgba(250,250,250)',
+                  color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" style="width: 100%">
+              <template slot="empty">
+                <img src="@/assets/icon/null.png" alt="" />
+                <p class="empty-p">暂无数据</p>
+              </template>
+              <el-table-column align="center" label="序号">
+                <template slot-scope="scope">{{scope.$index+1}}</template>
+              </el-table-column>
+              <el-table-column prop="dept" align="center" label="物资分类">
+                  <template slot-scope="{row}">
+                      <span v-if="row.level1">{{row.level1}}</span>
+                      <span v-else-if="row.level2">{{row.level2}}</span>
+                      <span v-else>{{row.level3}}</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="matterName" align="center" label="物资类型名称"></el-table-column>
+              <el-table-column prop="standards" align="center" label="规格型号"></el-table-column>
+              <el-table-column prop="unit" align="center" label="单位"></el-table-column>
+              <el-table-column prop="name" align="center" label="物资类别">
+                <template slot-scope="{row}">
+                  <span>{{['设备类','车辆类','耗材类'][row.categoryType-1]}}</span>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="操作">
+                <template slot-scope="{row}">
+                  <el-button type="text" icon="el-icon-delete" style="color:#f40;padding:0" @click="removeItem(row)"></el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="footer">
+      <el-button size="small" @click="dialogVisible = false;selectTableData=[]">取 消</el-button>
+      <el-button size="small" type="primary" @click="selectSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { emergencymaterial } from '@/api/mbsys/watersupply'
+import { getMatterTypes } from '@/api/mbsys/materialmanage'
+export default {
+  props: ['visible'],
+  data() {
+    return {
+      dialogVisible: false,
+      tableData: [],
+      selectTableData: [],
+      form: {},
+      pagination: { current: 1, size: 20, total: 0 }
+    }
+  },
+  watch: {
+    visible(val, oldVal) {
+      this.dialogVisible = val
+    }
+  },
+  mounted() {
+    this.emergencymaterial()
+  },
+  methods: {
+    open(data = null) {
+      this.dialogVisible = true
+      this.$refs.multipleTable.clearSelection();
+      this.selectTableData = []
+      if (data) {
+        this.selectTableData = JSON.parse(JSON.stringify(data))
+        this.checkSelected()
+      }
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    /**
+     * 获取人员列表
+     */
+    emergencymaterial() {
+      let params1 = JSON.parse(JSON.stringify(this.form));
+      let params2 = JSON.parse(JSON.stringify(this.pagination));
+      let params3 = { ...params1, ...params2 };
+      params3['matterType'] = 0
+      getMatterTypes(params3).then((res) => {
+        if (res.code === 1) {
+          this.tableData = res.result.records;
+          this.pagination.total = res.result.total;
+          this.checkSelected()
+        }
+      });
+    },
+    /**
+     * 检查是否已经选择
+     */
+    checkSelected() {
+      // 回显已经选择的
+      this.$nextTick(() => {
+        this.tableData.forEach(row => {
+          // 检查是否已经选择
+          const selected = this.selectTableData.some(item => {
+            if (item.id == row.id) return true
+          })
+          if (selected) this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      })
+    },
+    handleSizeChange(size) {
+      this.pagination.size = size;
+      this.emergencymaterial();
+    },
+    handleCurrentChange(current) {
+      this.pagination.current = current;
+      this.emergencymaterial();
+    },
+    /**
+     * 选择
+     */
+    rowSelect(selection, row) {
+      // 判断是否选中
+      const checked = selection.some(item => {
+        if (item.id == row.id) return true
+      })
+      if (checked) {
+        this.selectTableData.push(row)
+      } else {
+        this.selectTableData = this.selectTableData.filter(item => item.id != row.id)
+      }
+    },
+    /**
+     * 全选
+     */
+    selectAll(selection) {
+      console.log('输出：', selection)
+      this.selectTableData = JSON.parse(JSON.stringify(selection))
+    },
+    /**
+     * 移除行
+     */
+    removeItem(row) {
+      this.selectTableData = this.selectTableData.filter(item => item.id != row.id)
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    /**
+     * 
+     */
+    selectSubmit() {
+      this.$emit("selected", this.selectTableData)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog__wrapper {
+  >>> .box {
+    // border: 1px solid #ccc;
+    padding: 0 5px !important;
+    box-sizing: border-box;
+    .top {
+      width: 100%;
+      height: 45px;
+      // line-height: 45px;
+    }
+    .box-content {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #e2e2e2;
+      border-radius: 3px;
+      box-sizing: border-box;
+      padding: 10px;
+      .el-table--border::after,
+      .el-table--group::after,
+      .el-table::before {
+        background-color: transparent;
+      }
+      .h-title {
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        margin-bottom: 10px;
+        &::before {
+          content: "";
+          display: inline-block;
+          width: 6px;
+          height: 18px;
+          vertical-align: sub;
+          background-color: #70b603;
+          margin-right: 5px;
+        }
+        >>> .el-button span {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/mbsys/watersupply/emergencymanage/emergencyplan/widget.vue

@@ -39,15 +39,19 @@
             <template slot-scope="scope">{{scope.$index+1}}</template>
           </el-table-column>
           <el-table-column prop="name" label="预案编号" align="center"></el-table-column>
-          <el-table-column prop="dept" label="应急预案名称" align="center"></el-table-column>
-          <el-table-column prop="position" label="事故类型" align="center"></el-table-column>
-          <el-table-column prop="prop" label="事故等级" align="center"></el-table-column>
-          <el-table-column prop="phone" label="创建时间" align="center"></el-table-column>
-          <el-table-column prop="email" label="创建人" align="center"></el-table-column>
+          <el-table-column prop="eventName" label="应急预案名称" align="center"></el-table-column>
+          <el-table-column prop="eventType" label="事故类型" align="center">
+            <template slot-scope="{row}">{{getEventType(row)}}</template>
+          </el-table-column>
+          <el-table-column prop="eventGrade" label="事故等级" align="center">
+            <template slot-scope="{row}">{{getEventGrade(row)}}</template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
+          <el-table-column prop="createUserName" label="创建人" align="center"></el-table-column>
           <el-table-column label="操作" align="center">
             <template slot-scope="{ row }">
               <el-button @click="opendialog(2, row)" type="text" size="small">详细</el-button>
-              <el-button @click="deletePlan(row)" type="text" size="small">删除</el-button>
+              <el-button @click="deleteEmergency([row.id])" type="text" size="small">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -90,7 +94,11 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="关联危险源">
-              <el-input v-model="addForm.emergencyHazards" placeholder="请输入内容"></el-input>
+              <!-- <el-input v-model="addForm.emergencyHazards" placeholder="请输入内容"></el-input> -->
+              <el-select v-model="addForm.emergencyHazards" placeholder="请选择危险源" style="width:100%" multiple collapse-tags>
+                <el-option v-for="item in hazardList" :key="item.id" :label="item.hazardName" :value="item.id">
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -124,20 +132,20 @@
         <el-table-column label="序号" align="center">
           <template slot-scope="scope">{{scope.$index+1}}</template>
         </el-table-column>
-        <el-table-column prop="name" label="部门" align="center"></el-table-column>
-        <el-table-column prop="dept" label="姓名" align="center"></el-table-column>
-        <el-table-column prop="position" label="联系方式" align="center"></el-table-column>
-        <el-table-column prop="prop" label="职务" align="center"></el-table-column>
-        <el-table-column prop="phone" label="职责" align="center"></el-table-column>
-        <el-table-column prop="email" label="备注" align="center"></el-table-column>
+        <el-table-column prop="dept" label="部门" align="center"></el-table-column>
+        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
+        <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
+        <el-table-column prop="duty" label="职务" align="center"></el-table-column>
+        <!-- <el-table-column prop="duty" label="职责" align="center"></el-table-column> -->
+        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
         <el-table-column label="操作" align="center" width="100">
-          <template slot-scope="{ row }">
-            <el-button @click="deletePlan(row)" type="text" size="small">删除</el-button>
+          <template slot-scope="scope">
+            <el-button @click="removeperson(scope)" type="text" size="small">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="h-title" style="margin-top:30px">应急物资
-        <el-button type="text" style="float:right">添加物资类型</el-button>
+        <el-button type="text" style="float:right" @click="addsupply()">添加物资类型</el-button>
       </div>
       <el-table :data="materialData" :style="{ width: '100%' }" max-height="200px" :header-cell-style="{background: 'rgba(250,250,250)',
                   color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" border>
@@ -148,23 +156,33 @@
         <el-table-column label="序号" align="center">
           <template slot-scope="scope">{{scope.$index+1}}</template>
         </el-table-column>
-        <el-table-column prop="name" label="物资类别" align="center"></el-table-column>
-        <el-table-column prop="dept" label="物资分类" align="center"></el-table-column>
-        <el-table-column prop="position" label="物资类型" align="center"></el-table-column>
-        <el-table-column prop="prop" label="规格型号" align="center"></el-table-column>
-        <el-table-column prop="phone" label="单位" align="center"></el-table-column>
-        <el-table-column prop="email" label="数量" align="center"></el-table-column>
-        <el-table-column prop="email" label="备注" align="center"></el-table-column>
+        <el-table-column prop="name" label="物资类别" align="center">
+          <template slot-scope="{row}">
+            <span>{{['设备类','车辆类','耗材类'][row.categoryType-1]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="dept" label="物资分类" align="center">
+          <template slot-scope="{row}">
+            <span v-if="row.level1">{{row.level1}}</span>
+            <span v-else-if="row.level2">{{row.level2}}</span>
+            <span v-else>{{row.level3}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="matterName" label="物资类型" align="center"></el-table-column>
+        <el-table-column prop="standards" label="规格型号" align="center"></el-table-column>
+        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
+        <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
+        <!-- <el-table-column prop="remark" label="备注" align="center"></el-table-column> -->
         <el-table-column label="操作" align="center" width="100">
-          <template slot-scope="{ row }">
-            <el-button @click="deletePlan(row)" type="text" size="small">删除</el-button>
+          <template slot-scope="scope">
+            <el-button @click="removesupply(scope)" type="text" size="small">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="h-title" style="margin-top:30px">应急设施
-        <el-button type="text" style="float:right">添加应急设施</el-button>
+        <el-button type="text" style="float:right" @click="addfacilities()">添加应急设施</el-button>
       </div>
-      <el-table :data="facilityData" :style="{ width: '100%' }" max-height="200px" :header-cell-style="{background: 'rgba(250,250,250)',
+      <el-table :data="facilitiesData" :style="{ width: '100%' }" max-height="200px" :header-cell-style="{background: 'rgba(250,250,250)',
                   color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" border>
         <template slot="empty">
           <img src="@/assets/icon/null.png" alt="" />
@@ -174,35 +192,52 @@
           <template slot-scope="scope">{{scope.$index+1}}</template>
         </el-table-column>
         <el-table-column prop="name" label="设施名称" align="center"></el-table-column>
-        <el-table-column prop="dept" label="单位" align="center"></el-table-column>
-        <el-table-column prop="position" label="数量" align="center"></el-table-column>
-        <el-table-column prop="prop" label="备注" align="center"></el-table-column>
+        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
+        <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
+        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
         <el-table-column label="操作" align="center" width="100">
-          <template slot-scope="{ row }">
-            <el-button @click="deletePlan(row)" type="text" size="small">删除</el-button>
+          <template slot-scope="scope">
+            <el-button @click="removefacility(scope)" type="text" size="small">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="h-title" style="margin-top:30px">附件</div>
+      <div class="flexInfo" style="position:relative;">
+        <el-upload ref="upload" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-remove="handleRemove"
+                   :before-remove="beforeRemove" :on-change="beforeAvatarUpload" accept=".jpg,.jpeg,.png,.xls,.doc,.docx,.xlsx,.pdf"
+                   :file-list="fileList" :auto-upload="false" multiple size="small">
+          <el-button size="small" type="primary" style="margin-top: 3px; left:0px; float:left; ">附件上传</el-button>
+        </el-upload>
+        <span class="el-upload__tip upload-tip">⚠️注意：请上传jpg、png、jpeg、excel、word格式的文件，且大小不能超过10MB!</span>
+      </div>
 
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="addsubmit">确 定</el-button>
       </div>
-      <addPerson ref="addPerson" :visible="addpersonVisible"></addPerson>
+      <!-- 添加人员信息 -->
+      <addPerson ref="addPerson" :visible="addpersonVisible" @selected="personSelected"></addPerson>
+      <!-- 添加物资 -->
+      <addsupply ref="addsupply" :visible="addsupplyVisible" @selected="supplySelected"></addsupply>
+      <!-- 添加设施 -->
+      <addfacilities ref="addfacilities" :visible="addfacilitiesVisible" @selected="facilitiesSelected"></addfacilities>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getaddressbook, addressbookApi, editaddressbook, deleteressbookApi } from '@/api/mbsys/collaborative.js'
+import { addressbookApi, editaddressbook, deleteressbookApi } from '@/api/mbsys/collaborative.js'
 import { getTypetree } from '@/api/mbsys/materialmanage'
-import { addEmergency } from '@/api/mbsys/watersupply'
+import { addEmergency, emergencyList, deleteEmergency, getHazardAll, getEmergencyById } from '@/api/mbsys/watersupply'
 
 import addPerson from './children/addperson'
+import addsupply from './children/addsupply'
+import addfacilities from './children/addfacilities'
 export default {
   components: {
-    addPerson
+    addPerson,
+    addsupply,
+    addfacilities
   },
   data() {
     return {
@@ -217,6 +252,7 @@ export default {
       pagination: { current: 1, size: 40, total: 0 },
       dialogFormVisible: false,
       dialogFormVisible2: false,
+      addfacilitiesVisible: false,
       deptoption: [
         {
           value: 0,
@@ -228,14 +264,19 @@ export default {
         },
       ],
       addpersonVisible: false,
+      addsupplyVisible: false,
       eventGrades: [], // 事件等级
       eventTypes: [], // 事件类型
+      hazardList: [], // 危险源
       options: [],
       value2: [],
       value1: "",
       peopleData: [],
+      supplyData: [],
       materialData: [],
       facilityData: [],
+      facilitiesData: [],
+      fileList: [],
       formRules: {
         eventName: [
           { required: true, message: '请输入事故名称', trigger: 'blur' },
@@ -254,9 +295,10 @@ export default {
   },
   watch: {},
   mounted() {
-    this.getaddressbook();
     this.getEventGrades()
     this.getEventTypes()
+    this.emergencyList()
+    this.getHazardAll()
   },
   methods: {
     getEventGrades() {
@@ -271,27 +313,42 @@ export default {
           this.eventTypes = res.result[0].vos
       })
     },
+    getEventGrade(data) {
+      let grade = this.eventGrades.filter(item => item.id == data.eventGrade)[0].typeName
+      return grade
+    },
+    getEventType(data) {
+      let type = this.eventTypes.filter(item => item.id == data.eventType)[0].typeName
+      return type
+    },
+    getHazardAll() {
+      getHazardAll().then(res => {
+        this.hazardList = res.result
+      })
+    },
     /* 
       点击打开对话框
     */
     opendialog(type, data = null) {
-      console.log(data);
-      let { name, dept, position, phone, email, id } = JSON.parse(JSON.stringify(data)) || {}
+      // console.log(data);
+      // let { name, dept, position, phone, email, id } = JSON.parse(JSON.stringify(data)) || {}
       // this.addForm = JSON.parse(JSON.stringify(data)) || {};
       //   this.addForm = { name, dept, position, phone, email, id }
       this.type = type;
+      if (type == 2) {
+        this.getEmergencyById(data.id)
+      }
       this.dialogFormVisible = true;
     },
-    // 获取通讯录列表
-    getaddressbook(params) {
+    // 获取应急预案列表
+    async emergencyList(params) {
       let params1 = params ? JSON.parse(JSON.stringify(params)) : "";
       let params2 = JSON.parse(JSON.stringify(this.pagination));
       let params3 = { ...params1, ...params2 };
-      params3['isEmergency'] = 1
-      getaddressbook(params3).then((res) => {
+      emergencyList(params3).then((res) => {
         if (res.code === 1) {
-          //   this.tableData = res.result.records;
-          //   this.pagination.total = res.result.total;
+          this.tableData = res.result.records;
+          this.pagination.total = res.result.total;
         }
       });
     },
@@ -299,58 +356,46 @@ export default {
     addEmergency() {
       const formdata = new FormData()
       for (const key in this.addForm) {
-        formdata.append(key, this.addForm[key])
-      }
-      addEmergency(formdata).then((res) => {
-        if (res.code === 1) {
-          this.$message({
-            message: "新增成功",
-            type: "success",
+        if (key == "emergencyHazards") {
+          let arr = []
+          this.addForm[key].forEach((item, index) => {
+            formdata.append(`${key}[${index}].id`, parseInt(item))
           });
-          //   this.getaddressbook();
+        } else {
+          formdata.append(key, this.addForm[key])
         }
+      }
+      // 人员
+      this.peopleData.forEach((item, index) => {
+        formdata.append(`emergencyStaffs[${index}].id`, parseInt(item.id))
       });
-    },
-    /* 
-      修改会议室
-    */
-    editaddressbook() {
-      editaddressbook(this.addForm).then((res) => {
-        if (res.code === 1) {
-          this.$message({
-            message: "修改成功",
-            type: "success",
-          });
-          this.getaddressbook();
-        }
+      // 物资
+      this.materialData.forEach((item, index) => {
+        formdata.append(`emergencyMaterials[${index}].id`, parseInt(item.id))
       });
-    },
-    /* 
-      删除会议室
-    */
-    deleteressbookApi(obj) {
-      deleteressbookApi(obj).then((res) => {
+      // 设施
+      this.materialData.forEach((item, index) => {
+        formdata.append(`facilitiesDTOList[${index}].id`, parseInt(item.id))
+      });
+      if (typeof (this.files) != "undefined") {
+        if (this.files.length > 0) {
+          for (let i = 0; i < this.files.length; i++) {
+            formdata.append('fileList', this.files[i])
+          }
+        }
+      }
+      addEmergency(formdata).then((res) => {
         if (res.code === 1) {
           this.$message({
-            message: "删除成功",
+            message: "新增成功",
             type: "success",
           });
-          this.getaddressbook();
+          this.emergencyList();
         }
       });
     },
     // 点击新增对话框确定按钮
     addsubmit() {
-      //   //   if (!this.addForm.name)
-      //   //     return this.$message.error("请输入姓名");
-      //   //   if (!this.addForm.phone) return this.$message.error("请输入手机号码");
-      //   if (this.type == 1) {
-      //     this.addEmergency();
-      //   } else if (this.type == 3) {
-      //     // this.editaddressbook();
-      //   }
-      //   this.dialogFormVisible = false;
-
       this.$refs.addForm.validate((valid) => {
         if (valid) {
           this.addEmergency();
@@ -359,39 +404,141 @@ export default {
         }
       });
     },
-    //删除
-    deletePlan(data) {
+    /**
+     * 获取详情
+     */
+    getEmergencyById(id) {
+      getEmergencyById({ id: id }).then(res => {
+        console.log('输出：详情', res)
+      })
+    },
+    //删除预案
+    deleteEmergency(ids) {
       this.$confirm("删除该类型?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
+      }).then(() => {
+        deleteEmergency(ids).then(res => {
+          if (res.code == 1) {
+            this.$message.success("删除成功！")
+            this.emergencyList()
+          }
+        })
+      }).catch(() => { });
+    },
+    handleRemove(file, fileList) {
+      let uploadedFileIds = []
+      fileList.map(item => {
+        if (item.uploaded == true) uploadedFileIds.push(item.id)
       })
-        .then(() => {
-          let ids = data.id
-          let strId = ids.toString();
-          let arrId = strId.split('');
-          this.deleteressbookApi(arrId);
+      this.reportForm.annex = uploadedFileIds.join(',')
+      this.fileList = fileList
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    },
+    onBeforeUpload(file) {
+      let fileName = file.name
+      let esuffixt = fileName.substr(fileName.lastIndexOf(".") + 1)
+
+      const isIMAGE = esuffixt === "jpeg" || esuffixt === "png" ||
+        esuffixt === "jpg" || esuffixt === "pdf" || esuffixt === "xls" ||
+        esuffixt === "xlsx" || esuffixt === "doc" || esuffixt === "docx"
+      const isLt1M = file.size / 1024 / 1024 < 10;
+
+      if (!isIMAGE) {
+        this.$message.error('上传文件只能是jpg,png,jpeg,amr格式!');
+      }
+      if (!isLt1M) {
+        this.$message.error('上传文件大小不能超过 10MB!');
+      }
+      return isIMAGE && isLt1M;
+    },
+    //上传之前的钩子函数
+    beforeAvatarUpload(response, file, fileList) {
+      var isTrue = this.onBeforeUpload(response.raw)
+      if (isTrue) {
+        this.fileMap(file)
+      } else {
+        file.pop()
+      }
+    },
+    fileMap(file) {
+      if (file.length !== 0) {
+        const files = file.map((v) => {
+          return v.raw
         })
-        .catch(() => { });
+        this.files = files
+      }
     },
     addPerson() {
-      this.$refs.addPerson.open()
+      this.$refs.addPerson.open(this.peopleData)
+    },
+    addsupply() {
+      this.$refs.addsupply.open(this.supplyData)
+    },
+    addfacilities() {
+      this.$refs.addfacilities.open(this.facilitiesData)
     },
     /* 
      搜索
    */
     query() {
       let obj = this.$refs.form.model;
-      this.getaddressbook(obj);
+      this.emergencyList(obj);
     },
     handleSizeChange(size) {
       this.pagination.size = size;
-      this.getaddressbook();
+      this.emergencyList();
     },
     handleCurrentChange(current) {
       this.pagination.current = current;
-      this.getaddressbook();
+      this.emergencyList();
+    },
+    /**
+     * 人员选择
+     */
+    personSelected(data) {
+      this.peopleData = JSON.parse(JSON.stringify(data))
+      this.$refs.addPerson.close()
+    },
+    /**
+     * 物资选择
+     */
+    supplySelected(data) {
+      this.materialData = JSON.parse(JSON.stringify(data))
+      this.$refs.addsupply.close()
+    },
+    /**
+     * 设施选择
+     */
+    facilitiesSelected(data) {
+      this.facilitiesData = JSON.parse(JSON.stringify(data))
+      this.$refs.addfacilities.close()
+    },
+    /**
+     * 移除人员
+     */
+    removeperson(scope) {
+      const index = scope.$index
+      console.log('输出：', index)
+      this.peopleData.splice(index, 1)
     },
+    /**
+     * 移除物资类型
+     */
+    removesupply(scope) {
+      const index = scope.$index
+      this.materialData.splice(index, 1)
+    },
+    /**
+     * 移除设施
+     */
+    removefacility(scope) {
+      const index = scope.$index
+      this.facilitiesData.splice(index, 1)
+    }
   },
 };
 </script>
@@ -450,4 +597,18 @@ export default {
     text-decoration: underline;
   }
 }
+.upload-demo {
+  display: inline-block;
+  width: 100%;
+  >>> .el-upload-list__item {
+    display: inline-block;
+    width: auto;
+  }
+}
+.upload-tip {
+  position: absolute;
+  left: 100px;
+  top: 15px;
+  margin-top: 0;
+}
 </style>