jufubao-admin-library 1.0.0-beta1

package/library/viewModules/viewsEnterpriseBuy/viewsEnterpriseBuy/list.vue

@@ -0,0 +1,635 @@
+<template>
+  <div class="app-container">
+    <template>
+      <div class="app-container__title">{{title}}</div>
+      <el-card class="app-container__search">
+        <xd-search
+          dateFilter
+          :mainFilter="tabData"
+          :timeType="true"
+          mainFilterKey="tab"
+          :mainFilterIndex="mainFilterIndex"
+          labelWidth="100px"
+          v-if="searchForm.length > 0"
+          v-model="searchParams"
+          :list="searchForm"
+          @onSearch="handleSearch"
+          @onDone="getList"
+          @onTabClick="handleSearchTabClick"
+        ></xd-search>
+      </el-card>
+      <el-card class="app-container__list">
+        <div class="app-container__list-pagination">
+          <div></div>
+          <div v-if="isExport">
+            <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
+          </div>
+        </div>
+        <div class="app-container__list-table">
+          <xd-table
+            :default-select="['12987122','12987126']"
+            :get-link="getLink"
+            :headers="orderHeaders"
+            :key="tableKey"
+            :list="tables"
+            :hasExpand="true"
+            :stripe="false"
+            :custom-function="handleCustom"
+            default-expand-all
+            @onClick="handleCilck"
+            @onSelect="handleSelect"
+          >
+            <template slot="expand" slot-scope="scope">
+              <xd-table
+                is-border
+                :stripe="false"
+                :show-header="false"
+                :key="childKey"
+                :get-link="getLinkChild"
+                :headers="orderHeadersIn"
+                :list="scope.row.orderInfo"
+                :custom-function="item=>handleInCustom(item,scope.row)"
+                default-expand-all
+                @onClick="(row)=>{handleCilck(row, scope.row)}"
+                @onSelect="handleSelect"
+              >
+                <template slot="status" slot-scope="scope">{{scope.row.order_status_name}}</template>
+                <template slot="operate" slot-scope="scope">
+                  <order-button
+                    v-if="isOperate"
+                    :events="scope.row.buttons"
+                    :purchase_main_order_id="scope.row.purchase_main_order_id"
+                    @refresh="handeleRefresh"
+                  ></order-button>
+                  <div style="display:flex;justify-content: center;" v-if="scope.row.jfb_main_order_id">
+                    <el-button style="margin-top:10px;" v-if="isLookOrder" type="primary" size="small" @click="handleToOrder(scope.row.jfb_main_order_id)">查看订单</el-button>
+                  </div>
+                </template>
+              </xd-table>
+            </template>
+            <template slot="info" slot-scope="scope">
+              <div class="order-table-info" v-html="getInfo(scope.row)"></div>
+            </template>
+          </xd-table>
+        </div>
+        <div class="app-container__list-pagination">
+          <xd-pagination-jfb
+            :key="paginationKey"
+            v-if="initPage"
+            v-model="currentPage"
+            :next-page="nextPage"
+            :get-total="getCountList"
+            @onPagination="handlePagination"
+          ></xd-pagination-jfb>
+        </div>
+      </el-card>
+    </template>
+    <xd-dialog :show.sync="dialogExport" title="请输入文件名称" width="500px">
+      <el-form :model="exportFrom" :rules="exportRules" ref="exportRuleForm" label-width="80px">
+        <el-form-item label="文件名称" prop="name">
+          <el-input v-model="exportFrom.name" placeholder="请输入文件名称" />
+        </el-form-item>
+      </el-form>
+      <div slot="btn">
+        <el-button type="primary" @click="saveExportForm">确定</el-button>
+        <el-button type="default" @click="cancelExportForm">返回</el-button>
+      </div>
+    </xd-dialog>
+  </div>
+</template>
+
+<script>
+import XdSearch from "@/components/XdSearch"
+import XdTableImage from "@/components/XdTableImage"
+import {
+  mapActions,
+  mapState,
+} from 'vuex'
+import { Loading } from 'element-ui'
+import XdPagination from "@/components/XdPagination.vue"
+import XdTable from "@/components/XdTable"
+import XdTablePrice from "@/components/XdTablePrice"
+import XdStoreProduct from "@/components/XdStoreProduct"
+import { getOptions } from "@/utils/options"
+import XdDialog from "@/components/XdDialog"
+import XdDetail from "@/components/XdDetail"
+import checkPermission from "@/utils/permission"
+import permissions from "@/constant/permissions"
+import XdPaginationJfb from "@/components/XdPaginationJfb"
+import orderButton from "./compontents/OrderInfoButton"
+export default {
+  name: "orderCustomList",
+  components: {
+    XdPagination,
+    XdSearch,
+    XdTableImage,
+    XdTable,
+    XdTablePrice,
+    XdStoreProduct,
+    XdDialog,
+    XdDetail,
+    XdPaginationJfb,
+    orderButton
+  },
+
+  // mixins: [downloadString, getChannelList],
+
+  data () {
+    return {
+      page: 1,//当前页面数量
+      hasNextPage: true,
+      limit: 20,
+      tab: '',
+      isBorder: false,
+      searchForm: [], //搜索区域模块表单
+      searchParams: null, // 搜索参数
+      tables: [],
+      multipleSelection: [],
+      multipleSelectionData: [],
+      tableRefresh: 'tableRefresh',
+      total: 0,
+      tabData: [],
+      tableKey: 'tableKey',
+      orderHeadersIn: [
+        { type: 'normal', prop: 'user_name',sort: true, align: 'center', width: 205, label: '客户名称', rowspan: 4 },
+        { type: 'normal', prop: 'order_type_name', align: 'center', label: '清单类型' },
+        { type: 'normal', prop: 'product_num_total', align: 'center', label: '商品数量' },
+        { type: 'normal', prop: 'order_status_name', align: 'center', label: '订单状态' },
+        // #ifdef admin oa-finance
+        { type: 'price', prop: 'dist_amount', align: 'center', label: '订单金额' },
+        // #endif
+        // #ifdef partner-wholesale
+        { type: 'price', prop: 'total_amount', align: 'center', label: '订单金额' },
+        // #endif
+        // #ifdef admin partner-wholesale
+        { type: 'price', prop: 'user_settlement_amount', align: 'center', label: '用户实际结算金额' },
+         // #endif
+        // #ifdef oa-finance
+        { type: 'price', prop: 'partner_actual_pay_amount', align: 'center', label: '加盟商实际支付金额' },
+        // #endif
+         // #ifdef oa-finance admin
+        { type: 'normal', prop: 'partner_name', align: 'center', label: '加盟商' },
+        // #endif
+        {
+          type: 'operate',
+          align: 'center',
+          prop: 'operate',
+          width: 110,
+          label: '操作',
+          isCheckHide: true,
+          values: [
+            // {ui: 'text-button', target: '_blank', name: '发货', type: 'text'},
+          ]
+        }
+      ],
+      list: [],
+      mainFilterIndex: '',
+      priceKey: 'priceKey',
+      childKey: 'childKey',
+      paginationKey: 'paginationKey',//刷新插件key
+      initPage: false, //是否为首次加载
+      currentPage: '1', //请求访问的页面
+      nextPage: '', //下一页访问页码
+       //文件名称
+      dialogExport:false,
+      exportFrom:{
+        name:'',
+      },
+      exportRules: {
+        name: [
+          {
+            required: true,
+            message: "请输入文件名称",
+            trigger: "blur",
+          },
+          { min: 0, max: 20, message: '文件名称长度不能超过20', trigger: 'blur' }
+        ],
+      },
+      buttonData:[],
+    }
+  },
+  watch: {
+
+  },
+  computed: {
+    ...mapState(['commonParams']),
+    isExport () {
+      return checkPermission([permissions.enterprise_buy.mainOrderListExport])
+    },
+    //查看集采单
+    isLook () {
+      return checkPermission([permissions.enterprise_buy.purchaseMainOrderInfo])
+    },
+    //查看订单
+    isLookOrder(){
+      return checkPermission([permissions.enterprise_buy.mainOrderDetail])
+    },
+    isOperate(){
+      return checkPermission([permissions.enterprise_buy.purchaseListOperate])
+    },
+    orderHeaders () {
+      return [
+        { type: 'selection' },
+        { type: 'expand', hide: true },
+        { type: 'normal', prop: 'info', align: 'center', width: 150, label: '客户名称' },
+        { type: 'normal', prop: 'order_type_name', align: 'center', label: '清单类型' },
+        { type: 'normal', prop: 'product_num_total1', align: 'center', label: '商品数量' },
+        { type: 'normal', prop: 'order_status_name', align: 'center', label: '订单状态' },
+        { type: 'price', prop: 'total', align: 'center',  label: '订单金额' },
+        // #ifdef admin partner-wholesale
+        { type: 'price', prop: 'user_settlement_amount1', align: 'center', label: '用户实际结算金额' }, 
+         // #endif
+        // #ifdef oa-finance
+        { type: 'price', prop: 'partner_actual_pay_amount1', align: 'center', label: '加盟商实际支付金额' },
+        // #endif
+        // #ifdef oa-finance admin
+        { type: 'normal', prop: 'partner_name', align: 'center', label: '加盟商' },
+        // #endif
+        {
+          type: 'operate',
+          align: 'center',
+          prop: 'operate',
+          width: 110,
+          label: '操作',
+          values: [
+            this.isLook&&{ ui: 'text-link', target: '_self', name: '查看集采单', type: 'text' },
+          ].filter(i => i)
+        }
+      ]
+    }
+  },
+  async created () {
+    console.log(this.commonParams.xnamespace,'lplplplp');
+
+    this.title = this.$route.meta.title
+    let tabData = await this.tabItems()
+    this.tabData = tabData.data.items
+    this.tabData.unshift({label:'全部',value:'all'})
+    console.log(tabData,'yyyy')
+    // getOptions([{
+    //   server: 'order-partner',
+    //   fn: 'main-order-status',
+    //   path: 'p1',
+    // }, {
+    //   server: 'order-public',
+    //   fn: 'order-type',
+    //   path: 'p1',
+    // },])
+    //   .then(res => {
+    //     console.log(res, 'ttt')
+    //     res[0]['data']['list'].map(item => {
+    //       item.value = item.value.toString()
+    //     })
+    //     this.tabData = res[0]['data']['list']
+    //     this.tab = Date.now()
+    //     this.initSearchForm(res)
+    //   })
+    //   .catch(err => {
+
+    //   })
+    this.initSearchForm({})
+
+  },
+
+  methods: {
+
+    ...mapActions('enterprise_buy',
+      [
+        'purchaseMainOrder',
+        'tabItems'
+      ]
+    ),
+    getList () {
+      //请求数据
+      let params = this.handleGetSearchForm()
+      let loading = Loading.service({})
+      this.purchaseMainOrder(params).then(res => {
+        const { orders, total_size, next_page_token } = res.data
+        orders.map(item => {
+          item.confirm_time = window.getTimeFormat(item['main_order']['confirm_time'])
+          item.purchase_main_order_id = item['main_order']['purchase_main_order_id']
+          item.main_order.buttons = item.buttons
+          item.orderInfo = []
+          item.orderInfo.push(item.main_order)
+          return item
+        })
+        this.tables = orders
+        console.log(this.tables, ' this.tables,11')
+        this.total = total_size
+        this.priceKey = Date.now()
+        this.childKey = Date.now()
+        this.nextPage = next_page_token
+        if (!this.initPage) this.initPage = true
+        loading.close()
+      }).catch(e => {
+        console.log(e, 'eeee')
+        loading.close()
+      })
+    },
+    getCountList (cb) {
+      cb(this.total)
+    },
+    handleGetSearchForm() {
+      let needFilter = JSON.parse(JSON.stringify(this.searchParams))
+       if (this.searchParams.sale_account_list) {
+        needFilter.sale_account = this.searchParams.sale_account_list[0]['value']
+      }
+      return {
+        tab: this.searchParams.tab || 'all',
+        filter: this.searchParams.confirm_start_time ? { ...needFilter, } : needFilter,
+        page_token: this.currentPage.toString(),
+        page_size: this.limit
+      }
+    },
+    /**下载订单**/
+    handleExport () {
+      this.dialogExport = true
+    },
+    //导出确定
+    saveExportForm(){
+      this.$refs['exportRuleForm'].validate((valid) => {
+        if (valid) {
+          let params = {
+          ...this.handleGetSearchForm(),
+          file_ext: 'xlsx',
+          file_name: this.exportFrom.name,
+          export: true,
+        }
+        let loading = Loading.service({})
+        this.getMainOrderList(params).then(res => {
+          console.log(res, 'asdasda')
+          this.$message.success('导出任务已经开始执行，请去任务管理查看下载状态')
+          this.exportFrom.name = ''
+          this.dialogExport = false
+          loading.close()
+        }).catch(err => {
+          loading.close()
+          console.log(err, 'err')
+        })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    //导出取消
+    cancelExportForm(){
+      this.dialogExport = false
+      this.exportFrom.name = ''
+      this.$refs['exportRuleForm'].clearValidate()
+    },
+    /**
+     * @description 初始化搜索模块
+     */
+    initSearchForm (res) {
+      let end = new Date().getTime()
+      let start = end - 60 * 60 * 24 * 7 * 1000
+      getOptions([
+        // #ifdef admin
+        {
+          server: 'partner-admin',
+          fn: 'partner',
+          path: 'p1',
+          params:{
+            page_token:'1',
+            page_size:500
+          }
+        }
+        // #endif
+        ]).then(res => {
+        let searchForm = [
+          {
+            label: '集采单ID:', //label
+            ele: 'el-input',
+            valueKey: 'purchase_main_order_id', //form[valueKey]
+            value: '', //v-model
+            placeholder: '请输入ID'
+          },
+          {
+            label: '买家账号:', //label
+            ele: 'el-input',
+            valueKey: 'user_name', //form[valueKey]
+            value: '', //v-model
+            placeholder: '请输入买家账号'
+          },
+          {
+            label: '收货人姓名:', //label
+            ele: 'el-input',
+            valueKey: 'receipt_username', //form[valueKey]
+            value: '', //v-model
+            placeholder: '请输入收货人姓名'
+          },
+          {
+            label: '收货人手机号:', //label
+            ele: 'el-input',
+            valueKey: 'receipt_phone_number', //form[valueKey]
+            value: '', //v-model
+            placeholder: '请输入收货人手机号'
+          },
+          {
+            label: '下单时间:', //label
+            ele: 'xd-date', //package 名称
+            valueKey: ['confirm_start_time', 'confirm_end_time'], //form[valueKey]
+            value: [start, end], //v-model
+            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
+            formatValue: 'timestamp', //输出时间格式
+            placeholder: ['开始时间', '结束时间'],
+          },
+          // #ifdef admin
+          {
+            label: '加盟商:', //label
+            ele: 'xd-select-list', //package 名称
+            valueKey: 'partner_id', //form[valueKey]
+            placeholder: '请选择加盟商',
+            multiple: false,
+            collapseTags: false,
+            className:'input40',
+            list: res[0].data.list,
+          },
+          // #endif
+          // {
+          //   label: '销售账号:', //label
+          //   ele: 'xd-select-list', //package 名称
+          //   valueKey: 'sale_account', //form[valueKey]
+          //   placeholder: '请选择销售账号',
+          //   multiple: false,
+          //   collapseTags: false,
+          //   className:'input40',
+          //   list: res[0].data.list,
+          // },
+          {
+            label: '销售账号:',
+            ele: 'xd-remote-select',
+            valueKey: 'sale_account_list',
+            value: [],
+            className: 'input40',
+            placeholder: `请选择销售账号`,
+            multiple: false,
+            collapseTags: false,
+            remoteSearch: (query, resolve) => {
+              getOptions({
+                server: 'idaas-admin',
+                fn: 'users',
+                path: 'p1',
+                params: {
+                  page_token: '1',
+                  page_size: '500',
+                  pool_id:'jufubao',
+                  keyword: query
+                }
+              })
+                .then(res => {
+                  resolve(res.data.list)
+                })
+                .catch()
+          },
+        },
+        ].filter(i=>i)
+        this.searchForm = searchForm
+      }).catch(err=>{
+        console.log(err,'err')
+      })
+
+    },
+
+    /**
+     * @description 搜索事件
+     * @param action 动作
+     * @param form 搜索请求参数
+     */
+    handleSearch ({ action, form }) {
+      this.paginationKey = Date.now()
+      this.initPage = false
+      this.currentPage = '1'
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.getList()
+        })
+      }, 100)
+    },
+
+    /**
+     * @description 选中
+     */
+    handleSelect ({ value, select }) {
+      this.multipleSelection = this.$xdHelper.getListKeyForValue(select, 'main_order_id')
+      this.multipleSelectionData = select
+      this.sendKey = Date.now()
+    },
+
+    handlePagination (page) {
+      this.page = page
+      this.getList()
+    },
+
+    getLink ({ row, value, index }) {
+      return `/enterprise_buy/detail/${row.purchase_main_order_id}`
+    },
+
+    handleCustom ({ action, data }) {
+      if (action === 'merge') {
+        //这里必须启用懂下来列才能使用下来功能
+        //合并列操作 从第3列开始一共合并5列，被合并列必须返回[0,0]
+        let mergeColumn = 4
+        let startColumn = 2
+
+        //rowIndex，columnIndex的值是从0开始
+        let { row, column, rowIndex, columnIndex } = data
+
+        if (columnIndex === startColumn) {
+          return [1, mergeColumn]
+        }
+        if (columnIndex > startColumn && columnIndex < startColumn + mergeColumn) {
+          return [0, 0]
+        }
+      }
+    },
+
+    handleInCustom ({ action, data }, row) {
+      if (action === 'merge') {
+        let mergeRow = 1
+        let maxRow = 100 //需要合并的最大行数
+        let { row, column, rowIndex, columnIndex } = data
+
+        //rowIndex，columnIndex的值是从0开始
+        let mergeColumns = [2, 3, 4, 5] //第4列需要合并行，并且合并到数组最大值,
+
+        const check = (i) => {
+          return mergeColumns.filter(key => {
+            return key === i
+          }).length > 0
+        }
+
+        if (rowIndex === 0) {
+          if (check(columnIndex)) {
+            return [maxRow, 1]
+          } else return [1, 1]
+        } else {
+          if (check(columnIndex)) {
+            return [0, 0]
+          } else return [1, 1]
+        }
+      }
+      if (action === 'btn') {
+        if (row.order_status === 'NO_DELIVERY') {
+          return true
+        }
+        return false
+      }
+    },
+
+    getInfo (row) {
+      return `集采单编号：${row.purchase_main_order_id}<span style="padding: 0 10px"></span>下单时间：${row.confirm_time}`
+    },
+    handleCilck ({ row, value, index }, parent) {
+      console.log('handleCilck', row, value, index, parent)
+    },
+
+    getLinkChild ({ row, value, index }) {
+      return `/table/form/${row.id}`
+    },
+    /**商品信息**/
+    getProductInfo (value) {
+      return {
+        thumb: this.getImageFullPath(value.product_thumb),
+        title: value.product_name,
+        icon: value.product_type === 'good' ? '实' : value.product_type === 'virtual' ? '虚' : value.product_type === 'card' ? '卡' : value.product_type === 'network' ? '生' : value.product_type === 'settle' ? '核' : '',
+        specific: value.product_sku_name, params: { width: 150, height: 150 },
+        status: value.aftersale_status_name ? value.aftersale_method_name ? value.aftersale_method_name + '-' + value.aftersale_status_name : value.aftersale_status_name : '',
+        brand_name: value.brand_name,
+        aftersale_orderid: value.aftersale_orderid
+      }
+    },
+
+    handleSearchTabClick (n) {
+      console.log("handleSearchTabClick", n)
+      this.$router.replace({ query: this.$route.query, hash: n })
+    },
+    //查看订单
+    handleToOrder(order_id){
+      this.$router.push(`/enterprise_buy/order_detail/${order_id}`)
+    },
+    onJfbTagForReload () {
+      this.getList()
+    },
+    handeleRefresh(){
+      this.getList()
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.app-container__title {
+  font-size: 16px;
+  line-height: 24px;
+  padding: 0 0 20px;
+  font-weight: bold;
+}
+
+@media screen and (max-width: 768px) {
+  .app-container__title {
+    padding: 0 0 10px;
+  }
+}
+</style>