【修改】商用信息

src/views/supply/implement/commercial_implement_list.vue

@@ -1,14 +1,312 @@
 <template>
-  <!--  商用信息单执行明细-->
-  <div />
+  <div class="app-container">
+    <div v-show="!isShowDisplaceDetail">
+      <!-- 筛选条件 -->
+      <div class="screen-container">
+        <el-form ref="screenForm" :model="screenForm" label-width="100px" size="mini" label-position="left">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="时间" prop="policyRemark">
+                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="商家" prop="policyRemark">
+                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="项目名称" prop="policyRemark">
+                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="机型" prop="policyRemark">
+                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="信息单号" prop="policyRemark">
+                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="业务员" prop="policyRemark">
+                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="是否关闭" prop="policyRemark">
+                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="查询条件" prop="policyRemark">
+                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="24" class="tr">
+              <el-form-item label="">
+                <el-button @click="resetScreenForm">清空</el-button>
+                <el-button type="primary" @click="submitScreenForm">搜索</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+
+      <div class="mymain-container">
+        <div class="btn-group clearfix">
+          <!--          <div class="fr">-->
+          <!--            <ExportButton :ex-url="'retail/exec/listExport'" :ex-params="exParams" />-->
+          <!--          </div>-->
+        </div>
+        <div class="table">
+          <el-table
+            v-loading="listLoading"
+            :data="dataList"
+            element-loading-text="Loading"
+            border
+            fit
+            highlight-current-row
+            stripe
+            show-summary
+            :summary-method="$getSummaries"
+          >
+
+            <el-table-column align="left" label="信息单日期" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="工程编号" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="经销熵编码" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="经销商名称" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="项目名称" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="销售类型" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="物料编码" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="产品编码" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="产品名称" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="规格型号" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="数量" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="单价" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="金额" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="未订数量" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="未订金额" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="直调数量" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="退订数量" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="退货数量" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="表头业务员" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="审核人" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="是否关闭" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="格力内部备注" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="权限分类" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="合同有效期" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="安装地址" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="联系电话" prop="remark" min-width="160" show-overflow-tooltip />
+            <el-table-column align="left" label="工程登录类型" prop="remark" min-width="160" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+      <div class="pagination clearfix">
+        <div class="fr">
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
+    </div>
+    <DisplaceDetail
+      v-if="isShowDisplaceDetail"
+      :list-item="queryItem"
+      @backListFormDetail="backList"
+    />
+
+  </div>
 </template>
 
 <script>
+import { getList } from '@/api/supply/implement'
+import { getCategoryList } from '@/api/common'
+import DisplaceDetail from '@/views/supply/implement/components/displace_detail'
+
+let that
 export default {
-  name: 'CommercialImplementList'
+  components: {
+    DisplaceDetail
+  },
+  filters: {
+    statusFilter(val) {
+      if (that.statusList.length) {
+        const obj = that.statusList.find(o => o.value === val)
+        return obj ? obj.label : ''
+      }
+      return ''
+    }
+  },
+  data() {
+    return {
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: null, // 列表数据
+      listLoading: false, // 列表加载loading
+      screenForm: { // 筛选表单数据
+        status: '2',
+        goodsCode: '',
+        saleNum: '',
+        dealer: '',
+        goodsName: '',
+        model: '',
+        date: '',
+        serviceName: '',
+        itemServiceName: '',
+        newServiceName: '',
+        enginName: '',
+        loginNum: '',
+        k3CategoryNumber: [],
+        policyCode: '',
+        policyRemark: '',
+        isOver: ''
+      },
+      categoryList: [],
+      statusList: [
+        { label: '政策零售订单', value: '2' },
+        { label: '零售订单', value: '1' },
+        { label: '家用工程订单', value: 'HOME' },
+        { label: '商用工程订单', value: 'TRADE' }
+      ],
+
+      queryItem: {},
+      isShowDisplaceDetail: false
+    }
+  },
+
+  computed: {
+    exParams() {
+      return {
+        type: this.screenForm.status,
+        materialOldNumber: this.screenForm.goodsCode,
+        id: this.screenForm.saleNum,
+        customerName: this.screenForm.dealer,
+        materialName: this.screenForm.goodsName,
+        specification: this.screenForm.model,
+        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
+        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
+        serviceName: this.screenForm.serviceName,
+        newServiceName: this.screenForm.newServiceName,
+        itemServiceName: this.screenForm.itemServiceName,
+        projectName: this.screenForm.enginName,
+        enginRecordNo: this.screenForm.orderNum,
+        k3CategoryNumber: this.screenForm.k3CategoryNumber.join(','),
+        policyCode: this.screenForm.policyCode,
+        policyRemark: this.screenForm.policyRemark,
+        isOver: this.screenForm.isOver
+      }
+    }
+  },
+
+  beforeCreate() {
+    that = this
+  },
+
+  created() {
+    this.getList()
+    this.getCategoryList()
+  },
+
+  methods: {
+    // 查询列表
+    getList() {
+      this.listLoading = true
+
+      const params = {
+        pageNum: this.currentPage,
+        pageSize: this.pageSize,
+        type: this.screenForm.status,
+        materialOldNumber: this.screenForm.goodsCode,
+        id: this.screenForm.saleNum,
+        customerName: this.screenForm.dealer,
+        materialName: this.screenForm.goodsName,
+        specification: this.screenForm.model,
+        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
+        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
+        serviceName: this.screenForm.serviceName,
+        newServiceName: this.screenForm.newServiceName,
+        itemServiceName: this.screenForm.itemServiceName,
+        projectName: this.screenForm.enginName,
+        enginRecordNo: this.screenForm.orderNum,
+        k3CategoryNumber: this.screenForm.k3CategoryNumber.join(','),
+        policyCode: this.screenForm.policyCode,
+        policyRemark: this.screenForm.policyRemark,
+        isOver: this.screenForm.isOver
+      }
+      getList(params).then((res) => {
+        res.data.records.forEach(item => {
+          item.sums1 = ['refundableQty', 'qty', 'retiredQty', 'hasSendQty', 'directTransferQty', 'refundProductQty']
+          item.sums2 = ['payAmount', 'payRebateAmount', 'hasSendAmount', 'retiredAmount', 'refundProductAmount']
+        })
+        this.dataList = res.data.records
+        this.listTotal = res.data.total
+        this.listLoading = false
+      })
+    },
+
+    // 获取存货类别列表
+    getCategoryList() {
+      getCategoryList({
+        pageNum: 1,
+        pageSize: -1,
+        keyword: ''
+      }).then(res => {
+        this.categoryList = res.data.records
+      })
+    },
+
+    // 提交筛选表单
+    submitScreenForm() {
+      this.currentPage = 1
+      this.getList()
+    },
+
+    // 重置筛选表单
+    resetScreenForm() {
+      this.$refs.screenForm.resetFields()
+      this.currentPage = 1
+      this.getList()
+    },
+
+    // 更改每页数量
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.currentPage = 1
+      this.getList()
+    },
+
+    // 更改当前页
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.getList()
+    },
+
+    // 置换详情
+    openDisplaceDetail(item) {
+      this.queryItem = item
+      this.isShowDisplaceDetail = true
+    },
+
+    backList() {
+      this.queryItem = {}
+      this.isShowDisplaceDetail = false
+    }
+
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 </style>