模具列表页、模具详情页

ys_vue/src/routes.js

@@ -22,6 +22,7 @@ import competence from './views/project/competence.vue'
 
 import moldList from './views/mold/moldList.vue'
 import moldFile from './views/mold/moldFile.vue'
+import moldDetail from './views/mold/moldDetail.vue'
 
 import role from './views/base/role.vue'
 import comp from './views/base/comp.vue'
@@ -95,7 +96,7 @@ let routes = [
         leaf: true,//只有一个节点
         children: [
             { path: '/detection', component: detection, name: '运行检测' },
-            { path: '/detection/:id', component: maintenance, name: '运行检测详情' }
+            { path: '/detection/:id', component: maintenance, name: '运行检测详情', hidden: true }
         ]
     },
     // 项目管理
@@ -106,7 +107,7 @@ let routes = [
         iconCls: 'iconfont icon-ic_dashboard',
         children: [
             { path: '/project', component: project, name: '项目列表' },
-            { path: '/staff', component: staff, name: '人员管理'},
+            { path: '/staff', component: staff, name: '人员管理' },
             { path: '/competence', component: competence, name: '权限管理' }
         ]
     },
@@ -118,6 +119,7 @@ let routes = [
         iconCls: 'iconfont icon-moxing',
         children: [
             { path: '/moldList', component: moldList, name: '模具列表' },
+            { path: '/moldDetail/:id', component: moldDetail, name: '模具详情', hidden: true },
             { path: '/moldFile', component: moldFile, name: '模具文档' }
         ]
     },

ys_vue/src/views/mold/moldDetail.vue

@@ -0,0 +1,175 @@
+<template>
+  <section>
+    <!--工具条-->
+    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
+      <el-form :inline="true">
+        <el-form-item>
+          <el-button type="primary" @click="backToList">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <el-col :span="24" class="title">模具基本信息</el-col>
+    <el-col :span="24" class="main">
+      <el-col :span="6" class="detail">
+        模具信息编号：
+        <span class="info">{{mould.typeNumber}}</span>
+      </el-col>
+      <el-col :span="6" class="detail">
+        模具名称：
+        <span class="info">{{mould.name}}</span>
+      </el-col>
+      <el-col :span="6" class="detail">
+        模次寿命：
+        <span class="info">{{mould.lifetime}}</span>
+      </el-col>
+      <el-col :span="6" class="detail">
+        初始模次：
+        <span class="info">{{mould.initial}}</span>
+      </el-col>
+      <el-col :span="6" class="detail">
+        对应RFID码：
+        <span class="info">{{mould.RFIDcode}}</span>
+      </el-col>
+      <el-col :span="6" class="detail">
+        云模盒编号：
+        <span class="info">{{mould.mouldNumber}}</span>
+      </el-col>
+      <el-col :span="12" class="detail">
+        所属项目：
+        <span class="info">{{mould.project}}</span>
+      </el-col>
+      <el-col :span="12" class="detail">
+        生产厂家：
+        <span class="info">{{mould.manufacturer}}</span>
+      </el-col>
+    </el-col>
+
+    <el-col :span="24" class="title">文档资料</el-col>
+    <el-col :span="24">
+      <el-tabs v-model="activePage" @tab-click="handleClick">
+        <el-tab-pane label="模具文档" name="0">
+          <el-table
+            :data="documents"
+            highlight-current-row
+            v-loading="listLoading"
+            style="width: 100%;"
+          >
+            <el-table-column type="index" width="40"></el-table-column>
+            <el-table-column prop="name" label="名称" width="400" sortable></el-table-column>
+            <el-table-column prop="size" label="大小" width="200" sortable></el-table-column>
+            <el-table-column prop="uploader" label="上传者" width="200" sortable></el-table-column>
+            <el-table-column prop="uploadTime" label="上传时间" width="200" sortable></el-table-column>
+            <el-table-column label="状态" width="200" sortable>
+              <template slot-scope="scope">
+                <span v-if="scope.row.state == 0">需要</span>
+                <span v-else>不需要</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="220" sortable>
+              <el-button size="small">浏览</el-button>
+              <el-button size="small">下载</el-button>
+              <el-button size="small" type="danger">删除</el-button>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="零件文档" name="1">零件文档</el-tab-pane>
+        <el-tab-pane label="试模及验收" name="2">试模及验收</el-tab-pane>
+        <el-tab-pane label="保养方案" name="3">保养方案</el-tab-pane>
+        <el-tab-pane label="模具更新" name="4">模具更新</el-tab-pane>
+        <el-tab-pane label="模具报废" name="5">模具报废</el-tab-pane>
+      </el-tabs>
+    </el-col>
+
+    <el-col :span="24" class="title">操作记录</el-col>
+    <el-table :data="operations" highlight-current-row v-loading="listLoading" style="width: 100%;">
+      <el-table-column type="index" width="40"></el-table-column>
+      <el-table-column prop="name" label="姓名" width="400" sortable></el-table-column>
+      <el-table-column prop="document" label="文档名称" width="400" sortable></el-table-column>
+      <el-table-column label="操作" width="400" sortable>
+        <template slot-scope="scope">
+          <span v-if="scope.row.operations == 0">浏览</span>
+          <span v-else-if="scope.row.operations == 1">下载</span>
+          <span v-else>删除</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="time" label="时间" width="400" sortable></el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<script>
+import util from "../../common/js/util";
+export default {
+  data() {
+    return {
+      //临时数据
+      mould: {
+        typeNumber: "MUJU002",
+        name: "墨模具测试",
+        project: "墨盒项目",
+        client: "南京海市蜃楼有限公司",
+        manufacturer: "南京江宁制造局",
+        mouldNumber: "MOHE0023",
+        lifetime: "1年",
+        initial: "36",
+        RFIDcode: "RFID1234",
+        blueprint: true,
+        BOMtable: true,
+        partList: false,
+        standard: false
+      },
+      documents: [
+        {
+          name: "墨盒产品验证文档.word",
+          size: "100KB",
+          uploader: "张富贵",
+          uploadTime: "2019-07-24",
+          state: 0
+        }
+      ],
+      operations: [
+        {
+          name: "王多银",
+          document: "墨盒产品验证文档.word",
+          operation: 0,
+          time: "时间"
+        }
+      ],
+      listLoading: false,
+      activePage: 0
+    };
+  },
+  methods: {
+    backToList() {
+      this.$router.push("/moldList");
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  created() {},
+  mounted() {
+    var mouldId = this.$route.params.id; //传到当前页面的模具编号
+  }
+};
+</script>
+
+<style scoped>
+.title {
+  padding-left: 10px;
+  padding-bottom: 0px;
+  margin: 20px 0;
+  font-size: 16px;
+  line-height: 16px;
+  border-left: 1px blue solid;
+}
+.info {
+  color: grey;
+}
+.main {
+  padding-left: 10px;
+}
+.detail {
+  margin-bottom: 20px;
+}
+</style>

ys_vue/src/views/mold/moldList.vue

@@ -1,303 +1,165 @@
 <template>
-	<section>
-		<!--工具条-->
-		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
-			<el-form :inline="true" :model="filters">
-				<el-form-item>
-					<el-input v-model="filters.name" placeholder="姓名"></el-input>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" v-on:click="getUsers">查询</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="handleAdd">新增</el-button>
-				</el-form-item>
-			</el-form>
-		</el-col>
+  <section>
+    <!--工具条-->
+    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
+      <el-form :inline="true" :model="filters">
+        <el-col :span="2">
+          <el-form-item>
+            <el-select v-model="filters.value" clearable placeholder="请选择">
+              <el-option label="编号" value="0"></el-option>
+              <el-option label="名称" value="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-form-item>
+          <el-input v-model="filters.name" placeholder="请输入编号或名称进行搜索"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">查询</el-button>
+        </el-form-item>
+        <el-form-item style="float: right">
+          <el-button type="primary">新建</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
 
-		<!--列表-->
-		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
-			<el-table-column type="selection" width="55">
-			</el-table-column>
-			<el-table-column type="index" width="60">
-			</el-table-column>
-			<el-table-column prop="name" label="姓名" width="120" sortable>
-			</el-table-column>
-			<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
-			</el-table-column>
-			<el-table-column prop="age" label="年龄" width="100" sortable>
-			</el-table-column>
-			<el-table-column prop="birth" label="生日" width="120" sortable>
-			</el-table-column>
-			<el-table-column prop="addr" label="地址" min-width="180" sortable>
-			</el-table-column>
-			<el-table-column label="操作" width="150">
-				<template slot-scope="scope">
-					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
+    <!--列表-->
+    <el-table
+      :data="moulds"
+      :height="tableHeight"
+      highlight-current-row
+      v-loading="listLoading"
+      style="width: 100%;"
+    >
+      <el-table-column type="index" width="40"></el-table-column>
+      <el-table-column prop="typeNumber" label="模具类型编号" width="130" sortable></el-table-column>
+      <el-table-column prop="name" label="模具名称" width="100" sortable></el-table-column>
+      <el-table-column prop="project" label="所属项目" width="100" sortable></el-table-column>
+      <el-table-column prop="client" label="所属客户" width="100" sortable></el-table-column>
+      <el-table-column prop="manufacturer" label="生产厂家" width="100" sortable></el-table-column>
+      <el-table-column prop="mouldNumber" label="云模盒编号" width="120" sortable></el-table-column>
+      <el-table-column prop="lifetime" label="模次寿命" width="100" sortable></el-table-column>
+      <el-table-column prop="initial" label="初始模次" width="100" sortable></el-table-column>
+      <el-table-column prop="RFIDcode" label="对应RFID码" width="120" sortable></el-table-column>
+      <el-table-column label="图纸资料" width="100" sortable>
+        <template slot-scope="scope">
+          <span v-if="scope.row.blueprint">需要</span>
+          <span v-else>不需要</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Bom表" width="90" sortable>
+        <template slot-scope="scope">
+          <span v-if="scope.row.BOMtable">需要</span>
+          <span v-else>不需要</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="零件清单" width="100" sortable>
+        <template slot-scope="scope">
+          <span v-if="scope.row.partList">需要</span>
+          <span v-else>不需要</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="保养标准" width="100" sortable>
+        <template slot-scope="scope">
+          <span v-if="scope.row.standard">需要</span>
+          <span v-else>不需要</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="220" sortable>
+        <template slot-scope="scope">
+          <el-button size="small" @click="toDetail(scope.row.typeNumber)">详情</el-button>
+          <el-button size="small">修改</el-button>
+          <el-button size="small" type="danger">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-		<!--工具条-->
-		<el-col :span="24" class="toolbar">
-			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
-			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
-			</el-pagination>
-		</el-col>
-
-		<!--编辑界面-->
-		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
-			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
-				<el-form-item label="姓名" prop="name">
-					<el-input v-model="editForm.name" autocomplete="off"></el-input>
-				</el-form-item>
-				<el-form-item label="性别">
-					<el-radio-group v-model="editForm.sex">
-						<el-radio class="radio" :label="1">男</el-radio>
-						<el-radio class="radio" :label="0">女</el-radio>
-					</el-radio-group>
-				</el-form-item>
-				<el-form-item label="年龄">
-					<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
-				</el-form-item>
-				<el-form-item label="生日">
-					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
-				</el-form-item>
-				<el-form-item label="地址">
-					<el-input type="textarea" v-model="editForm.addr"></el-input>
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button @click.native="editFormVisible = false">取消</el-button>
-				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
-			</div>
-		</el-dialog>
-
-		<!--新增界面-->
-		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
-			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
-				<el-form-item label="姓名" prop="name">
-					<el-input v-model="addForm.name" autocomplete="off"></el-input>
-				</el-form-item>
-				<el-form-item label="性别">
-					<el-radio-group v-model="addForm.sex">
-						<el-radio class="radio" :label="1">男</el-radio>
-						<el-radio class="radio" :label="0">女</el-radio>
-					</el-radio-group>
-				</el-form-item>
-				<el-form-item label="年龄">
-					<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
-				</el-form-item>
-				<el-form-item label="生日">
-					<el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
-				</el-form-item>
-				<el-form-item label="地址">
-					<el-input type="textarea" v-model="addForm.addr"></el-input>
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button @click.native="addFormVisible = false">取消</el-button>
-				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
-			</div>
-		</el-dialog>
-	</section>
+    <!--工具条-->
+    <el-col :span="24" class="toolbar">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[20 , 50 , 80 , 100 , 200]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        style="float:right;"
+      ></el-pagination>
+    </el-col>
+  </section>
 </template>
 
 <script>
-	import util from '../../common/js/util'
-	//import NProgress from 'nprogress'
-	import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
-
-	export default {
-		data() {
-			return {
-				filters: {
-					name: ''
-				},
-				users: [],
-				total: 0,
-				page: 1,
-				listLoading: false,
-				sels: [],//列表选中列
-
-				editFormVisible: false,//编辑界面是否显示
-				editLoading: false,
-				editFormRules: {
-					name: [
-						{ required: true, message: '请输入姓名', trigger: 'blur' }
-					]
-				},
-				//编辑界面数据
-				editForm: {
-					id: 0,
-					name: '',
-					sex: -1,
-					age: 0,
-					birth: '',
-					addr: ''
-				},
-
-				addFormVisible: false,//新增界面是否显示
-				addLoading: false,
-				addFormRules: {
-					name: [
-						{ required: true, message: '请输入姓名', trigger: 'blur' }
-					]
-				},
-				//新增界面数据
-				addForm: {
-					name: '',
-					sex: -1,
-					age: 0,
-					birth: '',
-					addr: ''
-				}
-
-			}
-		},
-		methods: {
-			//性别显示转换
-			formatSex: function (row, column) {
-				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
-			},
-			handleCurrentChange(val) {
-				this.page = val;
-				this.getUsers();
-			},
-			//获取用户列表
-			getUsers() {
-				let para = {
-					page: this.page,
-					name: this.filters.name
-				};
-				this.listLoading = true;
-				//NProgress.start();
-				getUserListPage(para).then((res) => {
-					this.total = res.data.total;
-					this.users = res.data.users;
-					this.listLoading = false;
-					//NProgress.done();
-				});
-			},
-			//删除
-			handleDel: function (index, row) {
-				this.$confirm('确认删除该记录吗?', '提示', {
-					type: 'warning'
-				}).then(() => {
-					this.listLoading = true;
-					//NProgress.start();
-					let para = { id: row.id };
-					removeUser(para).then((res) => {
-						this.listLoading = false;
-						//NProgress.done();
-						this.$message({
-							message: '删除成功',
-							type: 'success'
-						});
-						this.getUsers();
-					});
-				}).catch(() => {
-
-				});
-			},
-			//显示编辑界面
-			handleEdit: function (index, row) {
-				this.editFormVisible = true;
-				this.editForm = Object.assign({}, row);
-			},
-			//显示新增界面
-			handleAdd: function () {
-				this.addFormVisible = true;
-				this.addForm = {
-					name: '',
-					sex: -1,
-					age: 0,
-					birth: '',
-					addr: ''
-				};
-			},
-			//编辑
-			editSubmit: function () {
-				this.$refs.editForm.validate((valid) => {
-					if (valid) {
-						this.$confirm('确认提交吗？', '提示', {}).then(() => {
-							this.editLoading = true;
-							//NProgress.start();
-							let para = Object.assign({}, this.editForm);
-							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
-							editUser(para).then((res) => {
-								this.editLoading = false;
-								//NProgress.done();
-								this.$message({
-									message: '提交成功',
-									type: 'success'
-								});
-								this.$refs['editForm'].resetFields();
-								this.editFormVisible = false;
-								this.getUsers();
-							});
-						});
-					}
-				});
-			},
-			//新增
-			addSubmit: function () {
-				this.$refs.addForm.validate((valid) => {
-					if (valid) {
-						this.$confirm('确认提交吗？', '提示', {}).then(() => {
-							this.addLoading = true;
-							//NProgress.start();
-							let para = Object.assign({}, this.addForm);
-							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
-							addUser(para).then((res) => {
-								this.addLoading = false;
-								//NProgress.done();
-								this.$message({
-									message: '提交成功',
-									type: 'success'
-								});
-								this.$refs['addForm'].resetFields();
-								this.addFormVisible = false;
-								this.getUsers();
-							});
-						});
-					}
-				});
-			},
-			selsChange: function (sels) {
-				this.sels = sels;
-			},
-			//批量删除
-			batchRemove: function () {
-				var ids = this.sels.map(item => item.id).toString();
-				this.$confirm('确认删除选中记录吗？', '提示', {
-					type: 'warning'
-				}).then(() => {
-					this.listLoading = true;
-					//NProgress.start();
-					let para = { ids: ids };
-					batchRemoveUser(para).then((res) => {
-						this.listLoading = false;
-						//NProgress.done();
-						this.$message({
-							message: '删除成功',
-							type: 'success'
-						});
-						this.getUsers();
-					});
-				}).catch(() => {
-
-				});
-			}
-		},
-		mounted() {
-			this.getUsers();
-		}
-	}
-
+import util from "../../common/js/util";
+export default {
+  data() {
+    return {
+      moulds: [
+        //临时数据
+        {
+          typeNumber: "MUJU002",
+          name: "墨模具测试",
+          project: "墨盒项目",
+          client: "南京海市蜃楼有限公司",
+          manufacturer: "南京江宁制造局",
+          mouldNumber: "MOHE0023",
+          lifetime: "1年",
+          initial: "36",
+          RFIDcode: "RFID1234",
+          blueprint: true,
+          BOMtable: true,
+          partList: false,
+          standard: false
+        },
+        {
+          typeNumber: "MUJU003",
+          name: "啦啦啦测试",
+          project: "啦啦项目",
+          client: "南京啦啦啦有限公司",
+          manufacturer: "南京啦啦制造局",
+          mouldNumber: "MOHE0045",
+          lifetime: "1秒",
+          initial: "47",
+          RFIDcode: "RFID5678",
+          blueprint: false,
+          BOMtable: false,
+          partList: true,
+          standard: true
+        }
+      ],
+      filters: {
+        name: "",
+        value: ""
+      },
+      listLoading: false,
+      total: 0,
+      tableHeight: 0
+    };
+  },
+  methods: {
+    //  分页
+    handleCurrentChange(val) {
+      this.page = val;
+      // this.getUsers();
+    },
+    handleSizeChange(val) {
+      this.size = val;
+      // this.getUsers();
+    },
+    selsChange: function(sels) {
+      this.sels = sels;
+    },
+    toDetail(id) {
+      this.$router.push("/moldDetail/" + id);
+    }
+  },
+  created() {
+    let height = window.innerHeight;
+    this.tableHeight = height - 210;
+  },
+  mounted() {}
+};
 </script>
 
 <style scoped>
-
 </style>