开发上装台账管理和上装配置检索的前端页面

anrui-scm/anrui-scm-ui/src/router/modules/codemenu.js

@@ -143,20 +143,20 @@ const codemenu = [
       meta: { title: '上装配置管理', noCache: true }
     }]
   },
-  // {
+  {
-  //   path: '/shangzhuang',
+    path: '/shangzhuang',
-  //   component: Layout,
+    component: Layout,
-  //   redirect: '/shangzhuang',
+    redirect: '/shangzhuang',
-  //   meta: {
+    meta: {
-  //     title: '上装台账管理'
+      title: '上装台账管理'
-  //   },
+    },
-  //   children: [{
+    children: [{
-  //     path: '/shangzhuang/shangzhuangtaizhangguanli',
+      path: '/shangzhuang/shangzhuangtaizhangguanli',
-  //     component: () => import('@/views/shangzhuang/shangzhuangtaizhangguanli/shangzhuangtaizhangguanli.vue'),
+      component: () => import('@/views/shangzhuang/shangzhuangtaizhangguanli/shangzhuangtaizhangguanli.vue'),
-  //     name: 'shangzhuangtaizhangguanli',
+      name: 'shangzhuangtaizhangguanli',
-  //     meta: { title: '上装台账管理', noCache: true }
+      meta: { title: '上装台账管理', noCache: true }
-  //   }]
+    }]
-  // },
+  },
   // 合格证台账
   {
     path: '/hegezhengtaizhang',

anrui-scm/anrui-scm-ui/src/views/shangzhuang/shangzhuangtaizhangguanli/shangzhangtaizhangInfo.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="app-container">
+    <div class="tab-header webtop">
+      <div>上装详情</div>
+      <div>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+    </div>
+    <div class="listconadd">
+      <el-form ref="dataForm" :model="formobj" class="formaddcopy02">
+        <el-row style="border-top: 1px solid #dfe4ed">
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>车辆功能</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.vehicleFunction }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>上装名称</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.topName }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>委改方式</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.refitMethod }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>委改厂</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.refitFactory }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>外廓尺寸</span></div>
+            <el-form-item>
+              <div class="addinputInfo addinputwOne" style="display: inline-block;margin-left: 120px;">
+                <span>长</span>{{ formobj.ceshi }}mm,
+                <span>宽</span>{{ formobj.ceshi }}mm,
+                <span>高</span>{{ formobj.ceshi }}mm
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>颜色</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.refitFactory }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>板材材质</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateMaterial }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>板材厚度</span></div>
+            <el-form-item>
+              <div class="addinputInfo addinputwOne" style="display: inline-block;margin-left: 120px;">
+                <span>底</span>{{ formobj.ceshi }}mm,
+                <span>边</span>{{ formobj.ceshi }}mm
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>篷布滑道</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateMaterial }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>冷藏冷机</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateThickness }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>自卸液压盖板</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateMaterial }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>底板加热</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateThickness }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="span-sty spanOneWidth"><span>更多配置</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.otherConfig }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>主车车架号</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateThickness }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>品牌</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateThickness }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>车型</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateMaterial }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>公告型号</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateThickness }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>厂家结算价(元)</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateThickness }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty spanOneWidth"><span>销售指导价(元)</span></div>
+            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.plateThickness }}</span></el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import req from '@/api/shangzhuang/shangzhuang'
+
+export default {
+  name: 'shangzhuangtaizhangInfo',
+  data() {
+    return {
+      formobj: {},
+      ceshi: '1'
+    }
+  },
+  methods: {
+    handleReturn() {
+      this.formobj = {}
+      this.$emit('doback')
+    },
+    showInfo(row) {
+      // this.formobj = row
+      req.fetchBySid(row.sid).then((resp) => {
+        this.formobj = resp.data
+      }).catch((e) => {
+        this.formobj = row
+      })
+      console.log('这里是详情回显', row)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.spanOneWidth {
+  width: 110px !important;
+}
+.addinputwOne {
+  margin-left: 120px !important;
+}
+</style>

anrui-scm/anrui-scm-ui/src/views/shangzhuang/shangzhuangtaizhangguanli/shangzhuangpeizhijiansuo.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    <div v-show="viewState == 1">
+      <button-bar view-title="上装配置检索" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
+      <div class="searchcon">
+        <el-button size="small" class="searchbtn" @click="isSearchShow = !isSearchShow">
+          {{ isSearchShow ? "隐藏查询条件" : "显示查询条件" }}
+        </el-button>
+        <div v-show="isSearchShow" class="search">
+          <el-form :inline="true" class="tab-header">
+            <el-row>
+              <el-form-item label="车辆功能">
+                <el-select v-model="queryParams.params.vehicleFunction" @change="changeVehicleFunction" filterable placeholder="请选择">
+                  <el-option v-for="item in vehicleFunction_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="委改方式">
+                <el-input v-model="queryParams.params.refitMethod" placeholder="请输入委改方式" clearable/>
+              </el-form-item>
+              <el-form-item label="委改厂">
+                <el-input v-model="queryParams.params.refitFactory" placeholder="请输入委改厂" clearable/>
+              </el-form-item>
+              <el-form-item label="上装名称">
+                <el-select v-model="queryParams.params.topName" @change="changeTopName" filterable placeholder="请选择">
+                  <el-option v-for="item in topName_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="颜色">
+                <el-input v-model="queryParams.params.overallDimension" placeholder="请输入颜色" clearable/>
+              </el-form-item>
+              <el-form-item label="板材材质">
+                <el-input v-model="queryParams.params.overallDimension" placeholder="请输入板材材质" clearable/>
+              </el-form-item>
+            </el-row>
+          </el-form>
+          <div class="btn" style="text-align: center">
+            <el-button type="primary" @click="dosearch">查询</el-button>
+            <el-button type="primary" @click="resetQuery">重置</el-button>
+          </div>
+        </div>
+      </div>
+      <!--Start 项目列表头部-->
+      <div class="listtop">
+        <div class="tit">上装配置列表</div>
+        <pageye v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" class="pagination" @pagination="loadList"/>
+      </div>
+      <!--End 项目列表头部-->
+      <!--Start 项目列表-->
+      <div class="listcon">
+        <el-table v-loading="tableLoading" :data="dataList" border style="width: 100%">
+          <el-table-column width="80px" label="序号" type="index" :index="indexMethod" align="center"/>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button type="primary" size="small" @click="handleSelect(scope.row)">选择</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="vehicleFunction" label="车辆功能" align="center"/>
+          <el-table-column prop="topName" label="上装名称" align="center"/>
+          <el-table-column prop="refitMethod" label="委改方式" align="center"/>
+          <el-table-column prop="refitFactory" label="委改厂" align="center"/>
+          <el-table-column prop="overallDimension" label="外廓尺寸" align="center"/>
+          <el-table-column prop="announcementModel" label="颜色" align="center"/>
+          <el-table-column prop="plateMaterial" label="板材材质" align="center"/>
+          <el-table-column prop="plateThickness" label="板材厚度" align="center"/>
+          <el-table-column prop="settlementPrice" label="篷布滑道" align="center"/>
+          <el-table-column prop="guidePrice" label="冷藏冷机" align="center"/>
+          <el-table-column prop="priceValidity" label="自卸液压盖板" align="center"/>
+          <el-table-column prop="priceValidity" label="底板加热" align="center"/>
+        </el-table>
+      </div>
+      <!--End 项目列表-->
+      <div class="pages">
+        <div class="tit"/>
+        <!-- 翻页 -->
+        <pagination v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" class="pagination" @pagination="loadList"/>
+      </div>
+    </div>
+    <!--End 查询和其列表部分-->
+  </div>
+</template>
+
+<script>
+import req from '@/api/shangzhuang/shangzhuang'
+import ButtonBar from '@/components/ButtonBar'
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+
+export default {
+  name: 'shangzhuangpeizhijiansuo',
+  components: {
+    ButtonBar,
+    Pagination,
+    pageye,
+  },
+  data() {
+    return {
+      btndisabled: false,
+      btnList: [
+        {
+          type: 'info',
+          size: 'small',
+          icon: 'cross',
+          btnKey: 'doClose',
+          btnLabel: '关闭'
+        }
+      ],
+      viewState: 1, // 1、列表 2、添加 3、修改 4、查看
+      isSearchShow: false,
+      tableLoading: false,
+      dataList: [],
+      topName_list: [],
+      vehicleFunction_list: [],
+      queryParams: {
+        current: 1,
+        size: 10,
+        total: 10,
+        params: {
+          vehicleFunction: '',
+          vehicleFunctionKey: '',
+          refitMethod: '',
+          refitFactory: '',
+          topName: '',
+          topNameKey: '',
+          overallDimension: ''
+        }
+      },
+      multipleSelection: []
+    }
+  },
+  mounted() {
+    this.$refs['btnbar'].setButtonList(this.btnList)
+  },
+  created() {
+    this.loadList()
+    this.DataDictionary()
+  },
+  methods: {
+    btnHandle(btnKey) {
+      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
+      switch (btnKey) {
+        case 'doClose':
+          this.doClose()
+          break
+        default:
+          break
+      }
+    },
+    DataDictionary() {
+      // 上装名称
+      req.pullDown({ type: 'topName' }).then((res) => {
+        if (res.success) {
+          this.topName_list = res.data
+        }
+      })
+      // 车辆功能
+      req.pullDown({ type: 'vehicleFunction' }).then((res) => {
+        if (res.success) {
+          this.vehicleFunction_list = res.data
+        }
+      })
+    },
+    changeTopName(value) {
+      let bb = null
+      this.topName_list.forEach((e) => {
+        if (e.dictKey === value) {
+          bb = {
+            name: e.dictValue,
+            value: e.dictKey
+          }
+        }
+      })
+      this.queryParams.params.topName = bb.name
+      this.queryParams.params.topNameKey = bb.value
+    },
+    changeVehicleFunction(value) {
+      let bb = null
+      this.vehicleFunction_list.forEach((e) => {
+        if (e.dictKey === value) {
+          bb = {
+            name: e.dictValue,
+            value: e.dictKey
+          }
+        }
+      })
+      this.queryParams.params.vehicleFunction = bb.name
+      this.queryParams.params.vehicleFunctionKey = bb.value
+    },
+    showData() {
+      const aa = []
+    },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.queryParams.current - 1) * this.queryParams.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    loadList() {
+      const _this = this
+      this.tableLoading = true
+      req.listPage(this.queryParams).then((resp) => {
+        _this.tableLoading = false
+        const data = resp.data
+        _this.queryParams.total = data.total
+        _this.dataList = data.records
+      }).catch(() => {
+        _this.tableLoading = false
+      })
+    },
+    handleSelect(row) {
+      this.$emit('backData', row)
+    },
+    dosearch() {
+      this.queryParams.current = 1
+      this.loadList()
+    },
+    resetQuery() {
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          vehicleFunction: '',
+          vehicleFunctionKey: '',
+          refitMethod: '',
+          refitFactory: '',
+          topName: '',
+          topNameKey: '',
+          overallDimension: ''
+        }
+      }
+      this.loadList()
+    }
+  }
+}
+</script>
+<style scoped>
+.searchbtn {
+  border: #2cab69 1px solid;
+  color: #2cab69;
+}
+.btn {
+  padding: 15px 0 15px 0;
+  border: 1px solid #e0e3eb;
+}
+
+.tab-header {
+  background-color: #edf1f7;
+  padding: 8px 20px;
+  margin-bottom: 0 !important;
+}
+
+.tab-header /deep/ .el-form-item {
+  margin-bottom: 10px;
+}
+.listtop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #dfe4ed;
+  height: 40px;
+}
+.tit {
+  margin-bottom: -10px;
+}
+.pagination {
+  margin-bottom: -10px;
+}
+</style>

anrui-scm/anrui-scm-ui/src/views/shangzhuang/shangzhuangtaizhangguanli/shangzhuangtaizhangAdd.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="app-container">
+    <div v-show="viewState ==1">
+      <div class="tab-header webtop">
+        <div>【入库】上装信息</div>
+        <div>
+          <el-button type="primary" size="small" @click="handleSave()">保存</el-button>
+          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+        </div>
+      </div>
+      <div class="listconadd">
+        <el-form ref="dataForm" :model="formobj" class="formaddcopy02">
+          <div class="tableStyle">
+            <div class="headline">上装配置信息</div>
+            <div>
+              <el-button type="primary" size="small" icon="el-icon-plus" class="btntopblueline" @click="handleSelect()">选择</el-button>
+            </div>
+          </div>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>车辆功能</span></div>
+              <el-form-item><span>{{ formobj.vehicleFunction }}</span></el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>上装名称</span></div>
+              <el-form-item><span>{{ formobj.topName }}</span></el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>委改方式</span></div>
+              <el-form-item><span>{{ formobj.refitMethod }}</span></el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>委改厂</span></div>
+              <el-form-item><span>{{ formobj.refitFactory }}</span></el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>外廓尺寸</span></div>
+              <el-form-item>
+                <div class="addinputw" style="display: inline-block;margin-left: 120px;">
+                  <span>长</span>{{ formobj.ceshi }}mm,
+                  <span>宽</span>{{ formobj.ceshi }}mm,
+                  <span>高</span>{{ formobj.ceshi }}mm
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>颜色</span></div>
+              <el-form-item><span>{{ formobj.refitFactory }}</span></el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>板材材质</span></div>
+              <el-form-item><span>{{ formobj.plateMaterial }}</span></el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>板材厚度</span></div>
+              <el-form-item>
+                <div class="addinputw" style="display: inline-block;margin-left: 120px;">
+                  <span>底</span>{{ formobj.ceshi }}mm,
+                  <span>边</span>{{ formobj.ceshi }}mm
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>篷布滑道</span></div>
+              <el-form-item><span>{{ formobj.plateMaterial }}</span></el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>冷藏冷机</span></div>
+              <el-form-item><span>{{ formobj.plateThickness }}</span></el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>自卸液压盖板</span></div>
+              <el-form-item><span>{{ formobj.plateMaterial }}</span></el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>底板加热</span></div>
+              <el-form-item><span>{{ formobj.plateThickness }}</span></el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <div class="span-sty spanOneWidth"><span>更多配置</span></div>
+              <el-form-item><span>{{ formobj.otherConfig }}</span></el-form-item>
+            </el-col>
+          </el-row>
+          <div class="headline">主车信息</div>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>主车车架号</span></div>
+              <el-form-item><el-input v-model="formobj.plateMaterial" class="addinputw addinputwOne" placeholder="" clearable></el-input></el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>品牌</span></div>
+              <el-form-item><span>{{ formobj.plateThickness }}</span></el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>车型</span></div>
+              <el-form-item><span>{{ formobj.plateMaterial }}</span></el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>公告型号</span></div>
+              <el-form-item><span>{{ formobj.plateThickness }}</span></el-form-item>
+            </el-col>
+          </el-row>
+          <div class="headline">上装价格信息</div>
+          <el-row>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>厂家结算价(元)</span></div>
+              <el-form-item><el-input v-model="formobj.plateMaterial" class="addinputw addinputwOne" placeholder="" clearable></el-input></el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>销售指导价(元)</span></div>
+              <el-form-item><el-input v-model="formobj.plateMaterial" class="addinputw addinputwOne" placeholder="" clearable></el-input></el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <shangzhuangpeizhijiansuo v-show="viewState == 2" ref="divSelect" @backData="backData" @doback="resetState"/>
+  </div>
+</template>
+
+<script>
+import req from '@/api/shangzhuang/shangzhuang'
+import shangzhuangpeizhijiansuo from './shangzhuangpeizhijiansuo'
+
+export default {
+  name: 'shangzhuangtaizhangAdd',
+  components: {
+    shangzhuangpeizhijiansuo
+  },
+  data() {
+    return {
+      viewState: 1,
+      formobj: {},
+      ceshi: '1'
+    }
+  },
+  methods: {
+    handleSelect() {
+      this.viewState = 2
+      this.$refs['divSelect'].showData()
+    },
+    handleReturn() {
+      this.formobj = {}
+      this.$emit('doback')
+    },
+    backData(row) {
+
+    },
+    showAdd() {
+
+    },
+    showEdit(row) {},
+  }
+}
+</script>
+
+<style scoped>
+.spanOneWidth {
+  width: 110px !important;
+}
+.addinputwOne {
+  margin-left: 120px !important;
+  width: 30% !important;
+}
+.headline{
+  height: 40px;
+  padding: 10px;
+  font-weight: bold;
+  font-size: 20px;
+  background-color: #018ad2;
+  text-align: left;
+  color: #ffffff;
+}
+.tableStyle {
+  background-color: #018ad2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /*border: 1px solid #dfe4ed;*/
+  height: 40px;
+}
+.btntopblueline {
+  margin-right: 10px;
+}
+</style>

anrui-scm/anrui-scm-ui/src/views/shangzhuang/shangzhuangtaizhangguanli/shangzhuangtaizhangguanli.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="app-container">
+    <div v-show="viewState == 1">
+      <button-bar view-title="上装台账管理" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
+      <div class="main-content">
+        <div class="searchcon">
+          <el-button size="small" class="searchbtn" @click="isSearchShow = !isSearchShow">
+            {{ isSearchShow ? "隐藏查询条件" : "显示查询条件" }}
+          </el-button>
+          <div v-show="isSearchShow" class="search">
+            <el-form :inline="true" class="tab-header">
+              <el-row>
+                <el-form-item label="车辆功能">
+                  <el-select v-model="queryParams.params.vehicleFunction" @change="changeVehicleFunction" filterable placeholder="请选择">
+                    <el-option v-for="item in vehicleFunction_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="委改方式">
+                  <el-input v-model="queryParams.params.refitMethod" placeholder="请输入委改方式" clearable/>
+                </el-form-item>
+                <el-form-item label="委改厂">
+                  <el-input v-model="queryParams.params.refitFactory" placeholder="请输入委改厂" clearable/>
+                </el-form-item>
+                <el-form-item label="上装名称">
+                  <el-select v-model="queryParams.params.topName" @change="changeTopName" filterable placeholder="请选择">
+                    <el-option v-for="item in topName_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="颜色">
+                  <el-input v-model="queryParams.params.overallDimension" placeholder="请输入颜色" clearable/>
+                </el-form-item>
+                <el-form-item label="板材材质">
+                  <el-input v-model="queryParams.params.overallDimension" placeholder="请输入板材材质" clearable/>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="公告型号">
+                  <el-input v-model="queryParams.params.overallDimension" placeholder="请输入颜色" clearable/>
+                </el-form-item>
+                <el-form-item label="主车车架号">
+                  <el-input v-model="queryParams.params.overallDimension" placeholder="请输入板材材质" clearable/>
+                </el-form-item>
+              </el-row>
+            </el-form>
+            <div class="btn" style="text-align: center">
+              <el-button type="primary" @click="dosearch">查询</el-button>
+              <el-button type="primary" @click="resetQuery">重置</el-button>
+            </div>
+          </div>
+        </div>
+        <!--Start 项目列表头部-->
+        <div class="listtop">
+          <div class="tit">上装库存台账列表</div>
+          <pageye v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" class="pagination" @pagination="loadList"/>
+        </div>
+        <!--End 项目列表头部-->
+        <!--Start 项目列表-->
+        <div class="listcon">
+          <el-table v-loading="tableLoading" :data="dataList" border style="width: 100%" @selection-change="handleSelectionChange">
+            <el-table-column width="50px" type="selection" align="center"/>
+            <el-table-column width="80px" label="序号" type="index" :index="indexMethod" align="center"/>
+            <el-table-column label="操作" width="180px" align="center">
+              <template slot-scope="scope">
+                <el-button type="primary" size="small" @click="toEdit(scope.row)">编辑</el-button>
+                <el-button type="primary" size="small" @click="toInfo(scope.row)">查看</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="vehicleFunction" label="车辆功能" align="center"/>
+            <el-table-column prop="topName" label="上装名称" align="center"/>
+            <el-table-column prop="refitMethod" label="委改方式" align="center"/>
+            <el-table-column prop="refitFactory" label="委改厂" align="center"/>
+            <el-table-column prop="announcementModel" label="颜色" align="center"/>
+            <el-table-column prop="plateMaterial" label="板材材质" align="center"/>
+            <el-table-column prop="plateThickness" label="品牌" align="center"/>
+            <el-table-column prop="plateThickness" label="公告型号" align="center"/>
+            <el-table-column prop="plateThickness" label="车型" align="center"/>
+            <el-table-column prop="plateThickness" label="主车车架号" align="center"/>
+            <el-table-column prop="plateThickness" label="库存状态" align="center"/>
+            <el-table-column prop="plateThickness" label="入库日期" align="center"/>
+            <el-table-column prop="plateThickness" label="出库日期" align="center"/>
+            <el-table-column prop="settlementPrice" label="厂家结算价" align="center"/>
+            <el-table-column prop="guidePrice" label="销售指导价" align="center"/>
+          </el-table>
+        </div>
+        <!--End 项目列表-->
+        <div class="pages">
+          <div class="tit"/>
+          <!-- 翻页 -->
+          <pagination v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" class="pagination" @pagination="loadList"/>
+        </div>
+      </div>
+    </div>
+    <!--End 查询和其列表部分-->
+    <!--新增修改部分组件-->
+    <shangzhuangtaizhangAdd v-show="viewState == 2 || viewState == 3" ref="divAdd" @doback="resetState" @reloadlist="loadList"/>
+    <!--详情部分组件-->
+    <shangzhangtaizhangInfo v-show="viewState == 4" ref="divinfo" @doback="resetState"/>
+  </div>
+</template>
+
+<script>
+import req from '@/api/shangzhuang/shangzhuang'
+import ButtonBar from '@/components/ButtonBar'
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import shangzhuangtaizhangAdd from './shangzhuangtaizhangAdd'
+import shangzhangtaizhangInfo from './shangzhangtaizhangInfo'
+
+export default {
+  name: 'shangzhuangtaizhangguanli',
+  components: {
+    ButtonBar,
+    Pagination,
+    pageye,
+    shangzhuangtaizhangAdd,
+    shangzhangtaizhangInfo
+  },
+  data() {
+    return {
+      btndisabled: false,
+      btnList: [
+        {
+          type: 'primary',
+          size: 'small',
+          icon: 'plus',
+          btnKey: 'toAdd',
+          btnLabel: '入库'
+        },
+        {
+          type: 'danger',
+          size: 'small',
+          icon: 'del',
+          btnKey: 'doDel',
+          btnLabel: '删除'
+        },
+        {
+          type: 'info',
+          size: 'small',
+          icon: 'cross',
+          btnKey: 'doClose',
+          btnLabel: '关闭'
+        }
+      ],
+      viewState: 1, // 1、列表 2、添加 3、修改 4、查看
+      isSearchShow: false,
+      tableLoading: false,
+      dataList: [],
+      topName_list: [],
+      vehicleFunction_list: [],
+      queryParams: {
+        current: 1,
+        size: 10,
+        total: 10,
+        params: {
+          vehicleFunction: '',
+          vehicleFunctionKey: '',
+          refitMethod: '',
+          refitFactory: '',
+          topName: '',
+          topNameKey: '',
+          overallDimension: ''
+        }
+      },
+      multipleSelection: []
+    }
+  },
+  mounted() {
+    this.$refs['btnbar'].setButtonList(this.btnList)
+  },
+  created() {
+    this.loadList()
+    this.DataDictionary()
+  },
+  methods: {
+    DataDictionary() {
+      // 上装名称
+      req.pullDown({ type: 'topName' }).then((res) => {
+        if (res.success) {
+          this.topName_list = res.data
+        }
+      })
+      // 车辆功能
+      req.pullDown({ type: 'vehicleFunction' }).then((res) => {
+        if (res.success) {
+          this.vehicleFunction_list = res.data
+        }
+      })
+    },
+    changeTopName(value) {
+      let bb = null
+      this.topName_list.forEach((e) => {
+        if (e.dictKey === value) {
+          bb = {
+            name: e.dictValue,
+            value: e.dictKey
+          }
+        }
+      })
+      this.queryParams.params.topName = bb.name
+      this.queryParams.params.topNameKey = bb.value
+    },
+    changeVehicleFunction(value) {
+      let bb = null
+      this.vehicleFunction_list.forEach((e) => {
+        if (e.dictKey === value) {
+          bb = {
+            name: e.dictValue,
+            value: e.dictKey
+          }
+        }
+      })
+      this.queryParams.params.vehicleFunction = bb.name
+      this.queryParams.params.vehicleFunctionKey = bb.value
+    },
+    resetState() {
+      this.viewState = 1
+    },
+    btnHandle(btnKey) {
+      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
+      switch (btnKey) {
+        case 'toAdd':
+          this.toAdd()
+          break
+        case 'toEdit':
+          this.toEdit()
+          break
+        case 'doDel':
+          this.doDel()
+          break
+        default:
+          break
+      }
+    },
+    toAdd(row) {
+      this.viewState = 2
+      this.$refs['divAdd'].showAdd()
+    },
+    toEdit(row) {
+      this.viewState = 3
+      this.$refs['divAdd'].showEdit(row)
+    },
+    doDel(row) {
+      if (this.multipleSelection.length === 0) {
+        this.$message({
+          showClose: true,
+          type: 'error',
+          message: '请选择至少一条记录进行删除操作'
+        })
+        return
+      }
+      const _this = this
+      const sids = []
+      this.multipleSelection.forEach((row) => {
+        sids.push(row.sid)
+      })
+      const tip = '请确认是否删除所选 ' + this.multipleSelection.length + ' 条记录?'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        req.delBySids(sids).then((resp) => {
+          loading.close()
+          _this.$message({
+            type: 'success',
+            message: resp.msg,
+            showClose: true
+          })
+          _this.loadList()
+        }).catch((e) => {
+          loading.close()
+        })
+      }).catch(() => {
+      })
+    },
+    dosearch() {
+      this.queryParams.current = 1
+      this.loadList()
+    },
+    resetQuery() {
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          vehicleFunction: '',
+          vehicleFunctionKey: '',
+          refitMethod: '',
+          refitFactory: '',
+          topName: '',
+          topNameKey: '',
+          overallDimension: ''
+        }
+      }
+      this.loadList()
+    },
+    loadList() {
+      const _this = this
+      this.tableLoading = true
+      req.listPage(this.queryParams).then((resp) => {
+        _this.tableLoading = false
+        const data = resp.data
+        _this.queryParams.total = data.total
+        _this.dataList = data.records
+      }).catch(() => {
+        _this.tableLoading = false
+      })
+    },
+    handleSelectionChange(val) {
+      console.log(val)
+      this.multipleSelection = val
+    },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.queryParams.current - 1) * this.queryParams.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    toInfo(row) {
+      this.$refs['divinfo'].showInfo(row)
+      this.viewState = 4
+    }
+  }
+}
+</script>
+<style scoped>
+.searchbtn {
+  border: #2cab69 1px solid;
+  color: #2cab69;
+}
+.btn {
+  padding: 15px 0 15px 0;
+  border: 1px solid #e0e3eb;
+}
+
+.tab-header {
+  background-color: #edf1f7;
+  padding: 8px 20px;
+  margin-bottom: 0 !important;
+}
+
+.tab-header /deep/ .el-form-item {
+  margin-bottom: 10px;
+}
+.listtop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #dfe4ed;
+  height: 40px;
+}
+.tit {
+  margin-bottom: -10px;
+}
+.pagination {
+  margin-bottom: -10px;
+}
+</style>