分包方

pages/meter-subcontract/subcontractor/MeterSubcontractor.vue

 <template>
   <div>
+    <!--内容-->
+    <div class="layout-content-padding">
+      <div class="layout-content-main">
+        <Row>
+          <!--查询-->
+          <Col span="24" style="margin-top: 10px">
+            <Form v-show="searchOpen" id="search-form" inline onsubmit="return false" :label-width="90">
+              <label class="label-sign"></label>
+              <Form-item class="search-item" label="实验室名称:">
+                <Input name="name" placeholder="请输入实验室名称" clearable @on-enter="_formSearch"/>
+              </Form-item>
+              <Form-item class="search-item" label="资质:">
+                <Input name="aptitude" placeholder="请输入资质" clearable @on-enter="_formSearch"/>
+              </Form-item>
+              <Form-item class="search-item" label="检测项目:">
+                <Input name="itemName" placeholder="请输入检测项目" clearable @on-enter="_formSearch"/>
+              </Form-item>
+              <Form-item class="search-btn">
+                <Button type="primary" @click="_formSearch">搜索</Button>
+              </Form-item>
+            </Form>
+          </Col>
+          <!--操作-->
+          <Col span="24">
+
+            <BtnList :msg="btn" class="contHide" :open="searchOpen" :show-search-btn="true"
+                     @on-result-change="_btnClick"></BtnList>
+          </Col>
+          <!--表格-->
+          <Col span="24">
             <PTVXETable ref="pageTable" :table-height="tableHeight"
                         :get-page="getPage" :icon-msg="iconMsg" hide-checkbox @on-result-change="_tableResultChange">
               <vxe-table-column
@@ -14,21 +44,51 @@
                 </template>
               </vxe-table-column>
             </PTVXETable>
+          </Col>
+        </Row>
+      </div>
+    </div>
   </div>
 </template>
-
 <script>
-import PTVXETable from '../../../components/table/PTVXETable'
 export default {
-  name: 'MeterSubcontractor',
-  comments: {
-    PTVXETable
-  },
+  components: {},
   data() {
     return {
+      currentComponent: '',
+      searchOpen: false,
+      btn: [
+        {
+          type: 'success',
+          id: '',
+          name: '添加',
+          componentName: 'FoodSubcontracterEdit'
+        }
+      ],
+      iconMsg: [
+        {
+          type: 'compose',
+          id: '',
+          name: '编辑',
+          componentName: 'FoodSubcontracterEdit'
+        },
+        {
+          type: 'stats-bars',
+          id: '',
+          name: '资质项目',
+          componentName: 'FoodSubcontracterItem'
+        },
+        { type: 'cloud', id: '', name: '附件', componentName: 'FileManage' },
+        { type: 'trash-a', id: '', name: '删除' },
+        {
+          type: 'ios-clock',
+          id: '',
+          name: '操作日志',
+          componentName: 'FoodSubRecord'
+        }
+      ],
+      selectIds: [],
       getPage: {},
-      tableHeight: 500,
-      iconMsg: [],
       pageColumns: [
         { title: '实验室名称', key: 'name', width: 200 },
         { title: '资质', key: 'aptitude', width: 200 },
@@ -41,11 +101,66 @@ export default {
       ]
     }
   },
+  computed: {
+    tableHeight: function() {
+      if (this.searchOpen) {
+        return this.$tableHeight('search')
+      } else {
+        return this.$tableHeight('noSearch')
+      }
+    }
+  },
+  mounted() {
+    this._page()
+  },
   methods: {
+    _modalResult() {
+      if (this.currentComponent === 'FoodSubcontracterEdit') {
+        this._page()
+      }
+    },
+    _btnClick(msg, componentName) {
+      this.currentComponent = componentName
+      this.$nextTick(function() {
+        switch (msg) {
+          case '添加':
+            this._editModal(false)
+            break
+          case 'search':
+            this.searchOpen = !this.searchOpen
+            break
+        }
+      })
+    },
+    _iconClick(res, data, componentName) {
+      this.currentComponent = componentName
+      this.$nextTick(function() {
+        switch (res) {
+          case '编辑':
+            this._editModal(true, data.id)
+            break
+          case '资质项目':
+            this._itemModal(data.id)
+            break
+          case '附件':
+            this._upload(data.id)
+            break
+          case '删除':
+            this._deleteByIds([data.id])
+            break
+          case '操作日志':
+            this._record(data.id)
+            break
+        }
+      })
+    },
+    _record(id) {
+      this.$refs.refModal._open(id)
+    },
     _tableResultChange(msg, data) {
       switch (msg) {
         case 'page':
-          this.getPage = {}
+          this.getPage = this.$store.state.FoodSubcontracter.page
           break
         case 'iconClick':
           this._iconClick(data.name, data.rowData, data.componentName)
@@ -54,10 +169,51 @@ export default {
           this._page()
           break
       }
+    },
+    _page() {
+      alert(123)
+    },
+    _formSearch() {
+      this.$refs.pageTable._pageChange(1)
+    },
+    // 删除
+    _deleteByIds(ids, content) {
+      this.$Modal.confirm({
+        title: '提示',
+        content: content || '确定删除该记录？',
+        onOk: () => {
+          this.$store
+            .dispatch('FoodSubcontracter/deleteByIds', ids)
+            .then(() => {
+              if (this.$store.state.FoodSubcontracter.success) {
+                this._page()
+                this.$Message.success('删除成功！')
+              }
+            })
+        }
+      })
+    },
+    // 编辑&添加
+    _editModal(edit, id) {
+      if (edit) {
+        // 编辑
+        this.$store.dispatch('FoodSubcontracter/getById', id).then(() => {
+          this.$refs.refModal._open(this.$store.state.FoodSubcontracter.model)
+        })
+      } else {
+        // 添加
+        this.$refs.refModal._open()
+      }
+    },
+    // 追加项目
+    _itemModal(data) {
+      this.$refs.refModal._open(data)
+    },
+
+    _upload(id) {
+      // 上传文件
+      this.$refs.refModal._open(id, 'subcontractorId')
     }
   }
 }
 </script>
-
-<style scoped>
-</style>