修改

src/router/index.js

@@ -223,6 +223,12 @@ export const constantRoutes = [
         name: 'MaterialsInfo'.toLocaleUpperCase(),
         meta: { title: '物资设备编码信息' },
         component: () => import('@/views/materialsInfo/index')
+      },
+      {
+        path: '/materialsInfo/details',
+        name: 'MaterialsInfo'.toLocaleUpperCase(),
+        meta: { title: '查看物资设备编码信息' },
+        component: () => import('@/views/materialsInfo/details')
       }
     ]
   },

src/views/materialsClassify/index.vue

@@ -86,7 +86,7 @@ export default {
       this.page = page
       this.getList()
     },
-    allPageSizeChange(rows) {
+    pageSizeChange(rows) {
       this.rows = rows
       this.getList()
     },

src/views/materialsInfo/api.js

 import request from '@/utils/request'
 
-// 获取所有数据字典类型
-export function getMaterialList(params) {
+// 物资设备编码信息列表查询
+export function getmaterialsInfoList(params) {
   return request({
-    url: '/SysFinance/queryFinanceByPage',
+    url: '/materialCode/queryCodeByPage',
     method: 'get',
     params
   })
 }
+// 物资设备编码信息详情接口
+export function getmaterialsInfoDetails(id) {
+  return request({
+    url: '/materialCode/getCode/' + id,
+    method: 'get'
+  })
+}

src/views/materialsInfo/details.vue

+<template>
+  <div class="unitDetailsClass">
+    <el-form ref="form" inline :model="form" disabled label-width="auto">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="物资设备主数据编码">
+            <el-input v-model="form.ZMATERIAL" placeholder="-" />
+          </el-form-item>
+          <el-form-item label="品名编码">
+            <el-input v-model="form.ZCLASS" placeholder="-" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="物资设备全称">
+            <el-input v-model="form.ZMNAME" placeholder="-" />
+          </el-form-item>
+          <el-form-item label="物资设备主数据状态">
+            <el-select v-model="form.ZMSTATE" style="width: 107%" placeholder="-">
+              <el-option value="0" label="停止" />
+              <el-option value="1" label="正常" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="是否常用编码">
+            <el-select v-model="form.ZOFTENCODE" style="width: 107%" placeholder="-">
+              <el-option value="1" label="是" />
+              <el-option value="0" label="否" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="form.ZREMARK" placeholder="-" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="unitDetailsTable">
+      <div class="title">物资设备属性列表</div>
+      <el-table :data="dataList" border>
+        <el-table-column label="序号" type="index" width="55" />
+        <el-table-column label="物资设备主数据编码" prop="ZMATERIAL" show-overflow-tooltip />
+        <el-table-column label="属性编码" prop="ZATTRCODE" show-overflow-tooltip />
+        <el-table-column label="属性名称" prop="ZATTRNAME" show-overflow-tooltip />
+        <el-table-column label="属性值编码" prop="ZVALUECODE" show-overflow-tooltip />
+        <el-table-column label="属性值名称" prop="ZVALUENAME" show-overflow-tooltip />
+        <el-table-column label="属性计量单位" prop="ZATTRUNIT" show-overflow-tooltip />
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { getmaterialsInfoDetails } from '@/views/materialsInfo/api'
+
+export default {
+  name: 'Details',
+  data() {
+    return {
+      dataList: [],
+      dataListBank: [],
+      form: {}
+
+    }
+  },
+  mounted() {
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      const id = this.$route.query.id
+      getmaterialsInfoDetails(id).then(res => {
+        this.form = res.data
+        this.dataList = res.data.ZMATLIST // 物资设备属性列表
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.unitDetailsClass{
+  padding: 10px;
+  .unitDetailsTable{
+    .title {
+      color: #000;
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 12px;
+      letter-spacing: 1px;
+    }
+  }
+}
+</style>

src/views/materialsInfo/index.vue

 <template>
   <div class="ContactsUnitList">
     <div class="search">
-      <el-form ref="personnelForm" inline :model="personnelForm" label-width="auto" label-position="right">
-        <el-form-item label="物资持有人">
-          <el-input v-model="personnelForm.ZBPNAME_ZH" placeholder="请输入物资持有人" />
+      <el-form ref="searchForm" inline :model="searchForm" label-width="auto" label-position="right">
+        <el-form-item label="物资设备主数据编码">
+          <el-input v-model="searchForm.ZMATERIAL" clearable placeholder="请输入物资设备主数据编码" />
         </el-form-item>
-        <el-form-item label="物资类型">
-          <el-select v-model="personnelForm.type" placeholder="请选择物资类型">
+        <el-form-item label="物资设备全称">
+          <el-input v-model="searchForm.ZMNAME" clearable placeholder="请输入物资设备全称" />
+        </el-form-item>
+        <el-form-item label="物资设备主数据状态">
+          <el-select v-model="searchForm.ZMSTATE" clearable placeholder="请选择物资设备主数据状态">
             <el-option :value="''" label="全部" />
-            <el-option value="0" label="原料" />
-            <el-option value="1" label="机电设备" />
-            <el-option value="2" label="金属材料" />
+            <el-option value="0" label="停止" />
+            <el-option value="1" label="正常" />
           </el-select>
         </el-form-item>
-        <el-form-item label="联系方式">
-          <el-input v-model="personnelForm.phone" placeholder="请输入联系方式" />
-        </el-form-item>
         <el-form-item>
           <el-button type="primary" size="small" @click="queryPersonnel">查询</el-button>
         </el-form-item>
@@ -23,13 +22,21 @@
     </div>
     <div class="personnelTable">
       <div class="title">物资设备编码列表</div>
-      <el-table :data="personData" border>
+      <el-table :data="data" border>
         <el-table-column label="序号" type="index" width="55" />
         <el-table-column label="物资设备主数据编码" prop="ZMATERIAL" show-overflow-tooltip />
         <el-table-column label="品名编码" prop="ZCLASS" show-overflow-tooltip />
         <el-table-column label="物资设备全称" prop="ZMNAME" show-overflow-tooltip />
-        <el-table-column label="物资设备主数据状态" prop="ZMSTATE" show-overflow-tooltip />
-        <el-table-column label="是否常用编码" prop="ZOFTENCODE" show-overflow-tooltip />
+        <el-table-column label="物资设备主数据状态" prop="ZMSTATE" show-overflow-tooltip>
+          <template slot-scope="{ row }">
+            <span>{{ row.ZMSTATE === '1' ? '正常' :row.ZMSTATE === '0' ? '停用' :'' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否常用编码" prop="ZOFTENCODE" show-overflow-tooltip>
+          <template slot-scope="{ row }">
+            <span>{{ row.ZOFTENCODE === '1' ? '是' :row.ZOFTENCODE === '0' ? '否' :'' }}</span>
+          </template>
+        </el-table-column>
         <el-table-column width="180px" label="操作">
           <template slot-scope="{ row }">
             <el-link :underline="false" type="primary" style="margin-left: 10px " @click.stop="checkDetails(row)">查看</el-link>
@@ -51,36 +58,59 @@
 </template>
 
 <script>
+import { getmaterialsInfoList } from '@/views/materialsInfo/api'
 export default {
-  name: 'MaterialsInfo',
+  name: 'MaterialsClassify',
   data() {
     return {
-      personnelForm: {
-        phone: '',
-        ZBPNAME_ZH: '', // 往来单位名称
-        type: '',
-        ZBPTYPE: '', // 往来单位类别
-        ZOIBC: '' // 组织机构代码
+      searchForm: {
+        ZMATERIAL: '',
+        ZMNAME: '',
+        ZMSTATE: ''
       },
-      personData: [],
+      data: [],
       total: 4,
       page: 1,
       rows: 10
     }
   },
+  mounted() {
+    this.getList()
+  },
   methods: {
+    currentPageChange(page) {
+      this.page = page
+      this.getList()
+    },
+    pageSizeChange(rows) {
+      this.rows = rows
+      this.getList()
+    },
     /** 查询按钮 */
-    queryPersonnel() {},
+    queryPersonnel() {
+      this.page = 1
+      this.getList()
+    },
+    getList() {
+      getmaterialsInfoList(Object.assign(
+        this.searchForm,
+        {
+          page: this.page,
+          rows: this.rows
+        })).then(res => {
+        this.data = res.data.records
+      })
+    },
     /** 查看按钮 */
     checkDetails(row) {
       this.$router.push({
-        path: '/materialsInfo/add',
+        path: '/materialsInfo/details',
         query: {
           type: 'details',
-          data: row
+          id: row.ZMATERIAL
         }
       })
-    },
+    }
   }
 }
 </script>