交易订单静态页面

assets/css/common.css

@@ -57,3 +57,16 @@ textarea:focus {
 .inlineb {
 	display: inline-block;
 }
+#cloud-balance .el-date-editor .el-range-separator {
+	width: auto !important;
+}
+
+.marginr10 {
+	margin-right: 10px;
+}
+.marginb10 {
+	margin-bottom: 10px;
+}
+.tablex table td {
+	text-align: center !important;
+}

components/menu/data.js

@@ -1,85 +1,103 @@
-const baseUrl = '/main/'
-export default [{
-  title: '财务',
-  icon: 'coin',
-  path: '',
-  subs: [
-    {
-      title: '云端结算',
-      path: baseUrl + 'cloud_balance',
-    },
-    {
-      title: '提现账单',
-      path: baseUrl + 'withdraw',
-    },
-    {
-      title: '工资结算',
-      path: 'baseUrl + wage_settlement',
-      hidden: true
-    }
-  ]
-},
-{
-  title: '运营',
-  icon: 'service',
-  path: '',
-  subs: [
-    {
-      title: '云端开发者展示',
-      path: baseUrl + 'dev_show',
-    },
-  ]
-},
-{
-  title: '项目',
-  icon: 's-management',
-  path: '',
-  subs: [{
-    title: '云端工作',
-    path: baseUrl + 'cloud_job',
-  },
-  {
-    title: '协作群组',
-    path: baseUrl + 'group_list',
-  },
-  {
-    title: '工猫结算订单',
-    path: baseUrl + 'gongmall',
-  }]
-},
-{
-  title: '用户与认证',
-  icon: 's-check',
-  path: '',
-  subs: [{
-    title: '开发者管理',
-    path: baseUrl + 'cats',
-  },{
-    title: '开发者审核',
-    path: baseUrl + 'dev_check',
-  }, {
-    title: '认证开发者',
-    path: baseUrl + 'cert_check',
-  }, {
-    title: '认证产品',
-    path: baseUrl + 'cert_pro',
-  }, {
-    title: '云端开发者认证表',
-    path: baseUrl + 'cloud_developer',
-  },]
-},
-{
-  title: '会员',
-  icon: 'user-solid',
-  path: '',
-  subs: [{
-    title: '会员管理',
-    path: baseUrl + 'vip_manager',
-  }, {
-    title: '会员订单',
-    path: baseUrl + 'vip_order',
-  }, {
-    title: '会员设置',
-    path: baseUrl + 'vip_setting',
-  }]
-},]
+const baseUrl = '/main/';
+export default [
+	{
+		title: '财务',
+		icon: 'coin',
+		path: '',
+		subs: [
+			{
+				title: '交易订单',
+				path: baseUrl + 'cloud_order'
+			},
+			{
+				title: '云端结算',
+				path: baseUrl + 'cloud_balance'
+			},
+			{
+				title: '提现账单',
+				path: baseUrl + 'withdraw'
+			},
+			{
+				title: '工资结算',
+				path: 'baseUrl + wage_settlement',
+				hidden: true
+			}
+		]
+	},
+	{
+		title: '运营',
+		icon: 'service',
+		path: '',
+		subs: [
+			{
+				title: '云端开发者展示',
+				path: baseUrl + 'dev_show'
+			}
+		]
+	},
+	{
+		title: '项目',
+		icon: 's-management',
+		path: '',
+		subs: [
+			{
+				title: '云端工作',
+				path: baseUrl + 'cloud_job'
+			},
+			{
+				title: '协作群组',
+				path: baseUrl + 'group_list'
+			},
+			{
+				title: '工猫结算订单',
+				path: baseUrl + 'gongmall'
+			}
+		]
+	},
+	{
+		title: '用户与认证',
+		icon: 's-check',
+		path: '',
+		subs: [
+			{
+				title: '开发者管理',
+				path: baseUrl + 'cats'
+			},
+			{
+				title: '开发者审核',
+				path: baseUrl + 'dev_check'
+			},
+			{
+				title: '认证开发者',
+				path: baseUrl + 'cert_check'
+			},
+			{
+				title: '认证产品',
+				path: baseUrl + 'cert_pro'
+			},
+			{
+				title: '云端开发者认证表',
+				path: baseUrl + 'cloud_developer'
+			}
+		]
+	},
+	{
+		title: '会员',
+		icon: 'user-solid',
+		path: '',
+		subs: [
+			{
+				title: '会员管理',
+				path: baseUrl + 'vip_manager'
+			},
+			{
+				title: '会员订单',
+				path: baseUrl + 'vip_order'
+			},
+			{
+				title: '会员设置',
+				path: baseUrl + 'vip_setting'
+			}
+		]
+	}
+];

pages/main/index/cloud_order copy.vue

@@ -0,0 +1,688 @@
+<template>
+  <div id="cloud-balance order-wrap">
+    <section class="top">
+      <h3>交易订单中心</h3>
+      <section>
+        <div class="type-boxs">
+          <span class="vsub">订单类型:</span>
+          <div class="inlineb">
+            <el-checkbox-group v-model="orderType" @change="changeOrder" size="mini">
+              <el-checkbox-button v-for="itm in TypeList" :label="itm.id" :key="itm.id">{{itm.type}}</el-checkbox-button>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="type-boxs">
+          <span class="vsub">交易类型:</span>
+          <div class="inlineb">
+            <el-checkbox-group v-model="tradeType" @change="changeTrade" size="mini">
+              <el-checkbox-button
+                v-for="itm in tradeList"
+                :label="itm.id"
+                :key="itm.id"
+              >{{itm.type}}</el-checkbox-button>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="type-boxs">
+          <span class="vsub">支付方式:</span>
+          <div class="inlineb">
+            <el-checkbox-group v-model="payType" @change="changePay" size="mini">
+              <el-checkbox-button v-for="itm in payList" :label="itm.id" :key="itm.id">{{itm.type}}</el-checkbox-button>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="type-boxs">
+          <div class="inlineb">
+            <span class>订单类型:</span>
+            <el-date-picker
+              v-model="timeRange"
+              type="daterange"
+              align="right"
+              unlink-panels
+              range-separator="到"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions2"
+            ></el-date-picker>
+          </div>
+          <div class="inlineb">
+            <span class>时间类型:</span>
+            <el-time-picker v-model="arriveTime" ElementUIplaceholder="到帐时间"></el-time-picker>
+          </div>
+        </div>
+        <div class="type-boxs">
+          <div class="inlineb">
+            <span class>编号:</span>
+            <div class="inlineb">
+              <el-input style="width: 230px;" v-model="searchId" placeholder="订单编号/订单名称/支付编号"></el-input>
+            </div>
+          </div>
+          <div class="inlineb">
+            <span class>用户:</span>
+            <div class="inlineb">
+              <el-input style="width: 180px;" v-model="checkUser" placeholder="uid/昵称/姓名"></el-input>
+            </div>
+          </div>
+          <div class="inlineb">
+            <span class>项目:</span>
+            <div class="inlineb">
+              <el-select v-model="status" placeholder="项目状态">
+                <el-option
+                  v-for="item of jobStatusList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+            <div class="inlineb">
+              <el-input style="width: 100px;" v-model="checkUser" placeholder="项目ID"></el-input>
+            </div>
+          </div>
+          <div class="inlineb">
+            <span class>状态:</span>
+            <div class="inlineb">
+              <el-select v-model="status" placeholder="项目状态">
+                <el-option
+                  v-for="item of jobStatusList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+      </section>
+    </section>
+
+    <!-- <section class="selector-box">
+      <section class="selector-box-left">
+        <el-select v-model="period" placeholder="账单状态">
+          <el-option
+            v-for="item of periodStatusList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+
+        <el-input style="width: 200px;" v-model="jobID" placeholder="项目ID"></el-input>
+        <el-button @click="clickSearchConfirm">确认</el-button>
+      </section>
+      <el-button @click="clickExport" type="primary">导出</el-button>
+    </section>-->
+    <div class="table" style="width: 100%">
+      <el-table
+        v-if="tableData.length"
+        height="100%"
+        border
+        style="width: 100%"
+        :data="tableData"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column
+          v-for="(prop, index) of tableProps"
+          :key="index"
+          :width="tableWidths[index]"
+          :prop="prop"
+          :label="tableHeaders[index]"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              v-if="prop === 'id'"
+              @click="clickOrder(scope.row)"
+            >{{scope.row[prop]}}</el-button>
+            <el-button
+              type="text"
+              v-else-if="prop === 'job_id'"
+              @click="clickJobID(scope.row[prop])"
+            >{{scope.row[prop]}}</el-button>
+            <el-button
+              type="text"
+              v-else-if="prop === 'company'"
+              @click="clickCompany(scope.row['uid'])"
+            >{{scope.row[prop]}}</el-button>
+            <el-button
+              type="text"
+              v-else-if="prop === 'operate'"
+              @click="clickOperate(scope.row)"
+            >{{scope.row[prop]}}</el-button>
+            <el-button
+              type="text"
+              v-else-if="prop === 'dev_realname'"
+              @click="clickDev(scope.row['developer_uid'])"
+            >{{scope.row[prop]}}</el-button>
+            <span v-else-if="prop === 'payAround'" v-html="scope.row[prop]" />
+            <span v-else>{{scope.row[prop]}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      background
+      @current-change="getTableData"
+      @size-change="changePageSize"
+      :current-page.sync="currentPage"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="20"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalCount"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+const tableHeaders = [
+  "项目ID",
+  "核定价格",
+  "托管费用",
+  "押金",
+  "次月托管",
+  "结算周期",
+  "结算金额",
+  "退回金额",
+  "预计发薪",
+  "发薪日期",
+  "状态",
+  "负责人",
+  "操作",
+  "备注",
+  "项目状态",
+  "账单ID",
+  "企业方",
+  "开发者",
+  "试用天数"
+];
+const tableProps = [
+  "job_id",
+  "salary",
+  "company_pay",
+  "p_company_deposit",
+  "next_period_pay",
+  "payAround",
+  "pay_to_dev",
+  "return_money",
+  "pre_send_salary_timeShow", //
+  "send_salary_time",
+  "p_status_name",
+  "chk_user",
+  "operate",
+  "settle_msg",
+  "j_status_name",
+  "id",
+  "company",
+  "dev_realname",
+  "probation_days"
+];
+const tableWidths = [
+  "80",
+  "80",
+  "100",
+  "80",
+  "100",
+  "120",
+  "80",
+  "80",
+  "90",
+  "80",
+  "80",
+  "100",
+  "80",
+  "180",
+  "80",
+  "80",
+  "100",
+  "100",
+  "80"
+];
+
+export default {
+  data() {
+    return {
+      orderType: [0],
+      tradeType: [0],
+      payType: [0],
+      TypeList: [
+        {
+          id: 0,
+          type: "全部"
+        },
+        {
+          id: 1,
+          type: "整包项目"
+        },
+        {
+          id: 2,
+          type: "云端工作"
+        },
+        {
+          id: 3,
+          type: "雇佣工作"
+        }
+      ],
+      tradeList: [
+        {
+          id: 0,
+          type: "全部"
+        },
+        {
+          id: 1,
+          type: "充值"
+        },
+        {
+          id: 2,
+          type: "提现"
+        },
+        {
+          id: 3,
+          type: "购买"
+        },
+        {
+          id: 4,
+          type: "购买"
+        }
+      ],
+      payList: [
+        {
+          id: 0,
+          type: "全部"
+        },
+        {
+          id: 1,
+          type: "充值"
+        },
+        {
+          id: 2,
+          type: "提现"
+        },
+        {
+          id: 3,
+          type: "购买"
+        },
+        {
+          id: 4,
+          type: "购买"
+        }
+      ],
+      pickerOptions2: {
+        shortcuts: [
+          {
+            text: "全部",
+            onClick(picker) {
+              alert("获取全部数据");
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近30天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本周",
+            onClick(picker) {
+              var week = new Date().getDay() - 1;
+              console.log(week);
+              if (week == -1) {
+                week = 6;
+              }
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * week);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本月",
+            onClick(picker) {
+              var month = new Date().getMonth + 1;
+              var year = new Date().getFullYear();
+              // console.log(month, year);
+              var day = new Date().getDate() - 1;
+              console.log(day);
+
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本年",
+            onClick(picker) {
+              var month = new Date().getMonth + 1;
+              var year = new Date().getFullYear();
+              // console.log(month, year);
+              var day = new Date().getDate() - 1;
+              var firstDay = new Date(year, 0, 1);
+              var dateDiff = new Date() - firstDay;
+              var msPerDay = 1000 * 60 * 60 * 24;
+              //计算天数
+              var diffDays = Math.ceil(dateDiff / msPerDay) - 1;
+              console.log(diffDays);
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * diffDays);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      },
+      timeRange: "",
+      arriveTime: "",
+      searchId: "",
+      // 下发的总数据
+      totalData: {},
+      // 项目ID
+      jobID: "",
+      // 审核人
+      period: "",
+      status: "",
+      // 状态列表数据
+      jobStatusList: [],
+      // 负责人
+      checkUser: "",
+      // 审核人列表
+      periodStatusList: [],
+      // 数据总条目
+      totalCount: 0,
+      currentPage: 1,
+      currentPageSize: 20,
+      // 列表宽度
+      tableWidths,
+      // 列表头显示内容
+      tableHeaders,
+      // 列表头字段
+      tableProps,
+      // 列表数据
+      tableData: [],
+      localData: {
+        env: "test"
+      }
+    };
+  },
+  computed: {
+    isTest() {
+      return this.localData.env === "test";
+    },
+    whole() {
+      return this.totalData.whole || {};
+    },
+    totalDeposit() {
+      return this.whole.total_deposit;
+    },
+    totalFee() {
+      return this.whole.total_fee;
+    }
+  },
+  mounted() {
+    this.getTableData();
+    this.getEnum();
+  },
+  methods: {
+    // 改变订单类型
+    changeOrder() {
+      var haveAll = false;
+      for (var i = 0; i < this.orderType.length; i++) {
+        if (this.orderType[i] == 0) {
+          haveAll = true;
+        }
+      }
+
+      // 选择其他的时候，去掉全部,全部在第一位
+      if (
+        this.orderType[0] == 0 &&
+        1 < this.orderType.length < this.TypeList.length
+      ) {
+        var arr = [];
+        for (var i = 0; i < this.orderType.length; i++) {
+          if (this.orderType[i] != 0) {
+            arr.push(this.orderType[i]);
+          }
+        }
+
+        this.orderType = arr;
+      }
+      // 选择全部的时候去掉其他，全部在最后一位
+      if (this.orderType[this.orderType.length - 1] == 0) {
+        this.orderType = [0];
+      }
+      if (!haveAll && this.orderType.length == this.TypeList.length - 1) {
+        this.orderType = [0];
+      }
+    },
+    // 改变交易类型
+    changeTrade() {
+      var haveAll = false;
+      for (var i = 0; i < this.tradeType.length; i++) {
+        if (this.tradeType[i] == 0) {
+          haveAll = true;
+        }
+      }
+
+      // 选择其他的时候，去掉全部,全部在第一位
+      if (
+        this.tradeType[0] == 0 &&
+        1 < this.tradeType.length < this.tradeList.length
+      ) {
+        var arr = [];
+        for (var i = 0; i < this.tradeType.length; i++) {
+          if (this.tradeType[i] != 0) {
+            arr.push(this.tradeType[i]);
+          }
+        }
+
+        this.tradeType = arr;
+      }
+      // 选择全部的时候去掉其他，全部在最后一位
+      if (this.tradeType[this.tradeType.length - 1] == 0) {
+        this.tradeType = [0];
+      }
+      if (!haveAll && this.tradeType.length == this.tradeList.length - 1) {
+        this.tradeType = [0];
+      }
+    },
+    // 改变支付方式
+    changePay() {
+      var haveAll = false;
+      for (var i = 0; i < this.payType.length; i++) {
+        if (this.payType[i] == 0) {
+          haveAll = true;
+        }
+      }
+
+      // 选择其他的时候，去掉全部,全部在第一位
+      if (
+        this.payType[0] == 0 &&
+        1 < this.payType.length < this.payList.length
+      ) {
+        var arr = [];
+        for (var i = 0; i < this.payType.length; i++) {
+          if (this.payType[i] != 0) {
+            arr.push(this.payType[i]);
+          }
+        }
+
+        this.payType = arr;
+      }
+      // 选择全部的时候去掉其他，全部在最后一位
+      if (this.payType[this.payType.length - 1] == 0) {
+        this.payType = [0];
+      }
+      if (!haveAll && this.payType.length == this.payList.length - 1) {
+        this.payType = [0];
+      }
+    },
+    clickExport() {
+      window.open("/api/admin/job/get_all_periods?action=export");
+    },
+    /**
+     * 获取筛选值
+     */
+    async getEnum() {
+      let { data } = await this.$get("/api/admin/job/getEnum");
+      console.log(data);
+      if (data) {
+        let { jobStatusList, periodStatusList } = data;
+        this.jobStatusList = jobStatusList;
+        this.periodStatusList = periodStatusList;
+      }
+    },
+    // 点击操作
+    clickOperate({ job_id, id }) {
+      if (this.isTest)
+        window.open(
+          `https://dev.test-rooter.proginn.com/main/wage_settlement?job_id=${job_id}&period_id=${id}`
+        );
+      else
+        window.open(
+          `https://rooter.proginn.com/main/wage_settlement?job_id=${job_id}&period_id=${id}`
+        );
+    },
+    // 点击账单
+    clickOrder(i) {
+      if (this.isTest)
+        window.open(
+          `https://dev.test-rooter.proginn.com/main/wage_details?job_id=${i.job_id}&period_id=${i.id}`
+        );
+      else
+        window.open(
+          `https://rooter.proginn.com/main/wage_details?job_id=${i.job_id}&period_id=${i.id}`
+        );
+    },
+    // 点击开发者
+    clickDev(uid) {
+      if (this.isTest)
+        window.open(`https://dev.test.proginn.com/rooter/user/${uid}`);
+      else window.open(`https://www.proginn.com/rooter/user/${uid}`);
+    },
+    // 点击企业
+    clickCompany(uid) {
+      if (this.isTest)
+        window.open(`https://dev.test.proginn.com/rooter/user/${uid}`);
+      else window.open(`https://www.proginn.com/rooter/user/${uid}`);
+    },
+    // 点击账单id
+    clickJobID(jobID) {
+      if (this.isTest)
+        window.open(
+          `https://dev.test.proginn.com/rooter/cloudjobitem/${jobID}`
+        );
+      else window.open(`https://www.proginn.com/rooter/cloudjobitem/${jobID}`);
+    },
+    // 点击重试
+    async clickRetry(id) {
+      const res = await this.$post("/api/admin/payment/redoDraw", { id });
+      // console.log(res)
+    },
+    // 根据状态显示图表样式
+    tableRowClassName({ row, rowIndex }) {
+      // console.log({row, rowIndex})
+      let className = "";
+      if (row.j_status_name === "结束合作") className = "end-row";
+      // console.log(className)
+      return className;
+    },
+    // 格式化列表数据
+    formatTableData(data) {
+      return data.map(i => ({
+        ...i,
+        payAround: `${i.start_time}<br>${i.end_time}`,
+        pre_send_salary_timeShow: new Date(
+          i.pre_send_salary_time * 1000
+        ).toLocaleDateString()
+      }));
+    },
+    /**
+     * 点击筛选确认
+     */
+    clickSearchConfirm() {
+      this.currentPage = 1;
+      this.getTableData();
+    },
+    changePageSize(pageSize) {
+      this.currentPageSize = pageSize;
+      this.getTableData();
+    },
+    // 获取列表数据
+    async getTableData() {
+      this.tableData = [];
+      let url = "/api/admin/job/get_all_periods";
+      let body = { page: this.currentPage, page_size: this.currentPageSize };
+      if (this.status) body.j_status = this.status;
+      if (this.period) body.p_status = this.period;
+      if (this.checkUser) body.chk_user = this.checkUser;
+      if (this.jobID) body.job_id = this.jobID;
+      const res = await this.$post(url, body);
+      const data = res.data;
+      this.tableData = this.formatTableData(data.list);
+      this.totalData = data;
+      // // console.log(this.tableData)
+      this.totalCount = Number(data.total);
+      this.totalPage = data.totalPage;
+      this.localData.env = data.current_env;
+    }
+  }
+};
+</script>
+
+<style scoped>
+#order-wrap .el-date-editor .el-range-separator {
+  width: auto;
+}
+#order-wrap {
+  width: 100%;
+}
+#cloud-balance {
+  white-space: nowrap;
+  overflow-x: scroll;
+}
+.top {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 240px;
+}
+.selector-box {
+  /* margin-top: 10px; */
+}
+.selector-box {
+  display: flex;
+  justify-content: space-between;
+}
+/* .selector-box-left {
+} */
+.table {
+  margin-top: 10px;
+  height: calc(100% - 160px);
+}
+.order-table {
+  height: calc(100% - 300px);
+}
+.end-row {
+  background: rgba(0, 0, 0, 0.1);
+}
+.inlineb {
+  display: inline-block;
+}
+.vsub {
+  vertical-align: sub;
+}
+.type-boxs {
+  margin-bottom: 10px;
+}
+</style>

pages/main/index/cloud_order.vue

@@ -0,0 +1,766 @@
+<template>
+  <div id="cloud-balance">
+    <section class="top">
+      <h3>交易订单中心</h3>
+      <section>
+        <div class="type-boxs">
+          <span class="vsub">订单类型:</span>
+          <div class="inlineb">
+            <el-checkbox-group v-model="orderType" @change="changeOrder" size="mini">
+              <el-checkbox-button v-for="itm in TypeList" :label="itm.id" :key="itm.id">{{itm.type}}</el-checkbox-button>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="type-boxs">
+          <span class="vsub">交易类型:</span>
+          <div class="inlineb">
+            <el-checkbox-group v-model="tradeType" @change="changeTrade" size="mini">
+              <el-checkbox-button
+                v-for="itm in tradeList"
+                :label="itm.id"
+                :key="itm.id"
+              >{{itm.type}}</el-checkbox-button>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="type-boxs">
+          <span class="vsub">支付方式:</span>
+          <div class="inlineb">
+            <el-checkbox-group v-model="payType" @change="changePay" size="mini">
+              <el-checkbox-button v-for="itm in payList" :label="itm.id" :key="itm.id">{{itm.type}}</el-checkbox-button>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="type-boxs">
+          <div class="inlineb">
+            <span class>订单类型:</span>
+            <el-date-picker
+              v-model="timeRange"
+              type="daterange"
+              align="right"
+              unlink-panels
+              range-separator="到"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions2"
+            ></el-date-picker>
+          </div>
+          <div class="inlineb">
+            <span class>时间类型:</span>
+            <el-time-picker v-model="arriveTime" ElementUIplaceholder="到帐时间"></el-time-picker>
+          </div>
+        </div>
+        <div class="type-boxs">
+          <div class="inlineb">
+            <span class>编号:</span>
+            <div class="inlineb">
+              <el-input style="width: 230px;" v-model="searchId" placeholder="订单编号/订单名称/支付编号"></el-input>
+            </div>
+          </div>
+          <div class="inlineb">
+            <span class>用户:</span>
+            <div class="inlineb">
+              <el-input style="width: 180px;" v-model="checkUser" placeholder="uid/昵称/姓名"></el-input>
+            </div>
+          </div>
+          <div class="inlineb">
+            <span class>项目:</span>
+            <div class="inlineb">
+              <el-select v-model="status" placeholder="项目状态">
+                <el-option
+                  v-for="item of jobStatusList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+            <div class="inlineb">
+              <el-input style="width: 100px;" v-model="checkUser" placeholder="项目ID"></el-input>
+            </div>
+          </div>
+          <div class="inlineb">
+            <span class>状态:</span>
+            <div class="inlineb">
+              <el-select v-model="status" placeholder="项目状态">
+                <el-option
+                  v-for="item of jobStatusList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </div>
+          <el-checkbox v-model="checked">人工财务</el-checkbox>
+          <el-button type="primary">筛选</el-button>
+          <el-button type="primary">导出报表</el-button>
+        </div>
+        <div class="type-boxs">
+          <div>
+            <span>订单数量：34000(成功31203)，</span>
+            <span>
+              收入金额：
+              <span class="green">120334元(成功123220元)</span>
+            </span>
+            ,
+            <span>
+              支出金额：
+              <span class="orange">134953元(成功12342元)</span>
+            </span>
+          </div>
+        </div>
+      </section>
+    </section>
+    <!-- <section class="selector-box">
+      <section class="selector-box-left">
+        <el-select v-model="status" placeholder="项目状态">
+          <el-option
+            v-for="item of jobStatusList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+        <el-select v-model="period" placeholder="账单状态">
+          <el-option
+            v-for="item of periodStatusList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+        <el-input style="width: 200px;" v-model="checkUser" placeholder="负责人"></el-input>
+        <el-input style="width: 200px;" v-model="jobID" placeholder="项目ID"></el-input>
+        <el-button @click="clickSearchConfirm">确认</el-button>
+      </section>
+      <el-button @click="clickExport" type="primary">导出</el-button>
+    </section>-->
+    <div class="table tablex">
+      <el-table :data="tableData3" height="250" border style="width: 100%">
+        <el-table-column prop="date" label="订单名称"></el-table-column>
+        <el-table-column prop="name" label="用户"></el-table-column>
+        <el-table-column label="实际金额">
+          <template slot-scope="scope">
+            <span :class="parseInt(scope.row.money)>0?'green':'orange'">{{scope.row.money}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="支付方式"></el-table-column>
+        <el-table-column prop="name" label="订单状态"></el-table-column>
+        <el-table-column prop="name" label="创建时间"></el-table-column>
+        <el-table-column prop="name" label="到账时间"></el-table-column>
+        <el-table-column prop="name" label="订单编号"></el-table-column>
+        <el-table-column prop="name" label="支付编号"></el-table-column>
+        <el-table-column prop="name" width="100" label="订单类型">
+          <template slot-scope="scope">
+            <span v-if="scope.row.state==1" class="state-success">成功</span>
+            <span v-if="scope.row.state==2" class="state-wait">待提交</span>
+            <span v-if="scope.row.state==3" class="state-load">提交中</span>
+            <span v-if="scope.row.state==4" class="state-faile">失败</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="交易类型"></el-table-column>
+        <el-table-column prop="name" label="关联项目"></el-table-column>
+        <el-table-column prop="name" label="人工"></el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      background
+      @current-change="getTableData"
+      @size-change="changePageSize"
+      :current-page.sync="currentPage"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="20"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalCount"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+const tableHeaders = [
+  "项目ID",
+  "核定价格",
+  "托管费用",
+  "押金",
+  "次月托管",
+  "结算周期",
+  "结算金额",
+  "退回金额",
+  "预计发薪",
+  "发薪日期",
+  "状态",
+  "负责人",
+  "操作",
+  "备注",
+  "项目状态",
+  "账单ID",
+  "企业方",
+  "开发者",
+  "试用天数"
+];
+const tableProps = [
+  "job_id",
+  "salary",
+  "company_pay",
+  "p_company_deposit",
+  "next_period_pay",
+  "payAround",
+  "pay_to_dev",
+  "return_money",
+  "pre_send_salary_timeShow", //
+  "send_salary_time",
+  "p_status_name",
+  "chk_user",
+  "operate",
+  "settle_msg",
+  "j_status_name",
+  "id",
+  "company",
+  "dev_realname",
+  "probation_days"
+];
+const tableWidths = [
+  "80",
+  "80",
+  "100",
+  "80",
+  "100",
+  "120",
+  "80",
+  "80",
+  "90",
+  "80",
+  "80",
+  "100",
+  "80",
+  "180",
+  "80",
+  "80",
+  "100",
+  "100",
+  "80"
+];
+
+export default {
+  data() {
+    return {
+      checked: false,
+      orderType: [0],
+      tradeType: [0],
+      payType: [0],
+      TypeList: [
+        {
+          id: 0,
+          type: "全部"
+        },
+        {
+          id: 1,
+          type: "整包项目"
+        },
+        {
+          id: 2,
+          type: "云端工作"
+        },
+        {
+          id: 3,
+          type: "雇佣工作"
+        }
+      ],
+      tradeList: [
+        {
+          id: 0,
+          type: "全部"
+        },
+        {
+          id: 1,
+          type: "充值"
+        },
+        {
+          id: 2,
+          type: "提现"
+        },
+        {
+          id: 3,
+          type: "购买"
+        },
+        {
+          id: 4,
+          type: "购买"
+        }
+      ],
+      payList: [
+        {
+          id: 0,
+          type: "全部"
+        },
+        {
+          id: 1,
+          type: "充值"
+        },
+        {
+          id: 2,
+          type: "提现"
+        },
+        {
+          id: 3,
+          type: "购买"
+        },
+        {
+          id: 4,
+          type: "购买"
+        }
+      ],
+      pickerOptions2: {
+        shortcuts: [
+          {
+            text: "全部",
+            onClick(picker) {
+              alert("获取全部数据");
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近30天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本周",
+            onClick(picker) {
+              var week = new Date().getDay() - 1;
+              console.log(week);
+              if (week == -1) {
+                week = 6;
+              }
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * week);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本月",
+            onClick(picker) {
+              var month = new Date().getMonth + 1;
+              var year = new Date().getFullYear();
+              // console.log(month, year);
+              var day = new Date().getDate() - 1;
+              console.log(day);
+
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本年",
+            onClick(picker) {
+              var month = new Date().getMonth + 1;
+              var year = new Date().getFullYear();
+              // console.log(month, year);
+              var day = new Date().getDate() - 1;
+              var firstDay = new Date(year, 0, 1);
+              var dateDiff = new Date() - firstDay;
+              var msPerDay = 1000 * 60 * 60 * 24;
+              //计算天数
+              var diffDays = Math.ceil(dateDiff / msPerDay) - 1;
+              console.log(diffDays);
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * diffDays);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      },
+      timeRange: "",
+      arriveTime: "",
+      searchId: "",
+      tableData3: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          money: "200",
+          state: 1
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          money: "-100",
+          state: 2
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          money: "-100",
+          state: 3
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          money: "-100",
+          state: 4
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          money: "2100",
+          state: 1
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          money: "-1200",
+          state: 4
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          money: "-100",
+          state: 1
+        }
+      ],
+
+      // 下发的总数据
+      totalData: {},
+      // 项目ID
+      jobID: "",
+      // 审核人
+      period: "",
+      status: "",
+      // 状态列表数据
+      jobStatusList: [],
+      // 负责人
+      checkUser: "",
+      // 审核人列表
+      periodStatusList: [],
+      // 数据总条目
+      totalCount: 0,
+      currentPage: 1,
+      currentPageSize: 20,
+      // 列表宽度
+      tableWidths,
+      // 列表头显示内容
+      tableHeaders,
+      // 列表头字段
+      tableProps,
+      // 列表数据
+      tableData: [],
+      localData: {
+        env: "test"
+      }
+    };
+  },
+  computed: {
+    isTest() {
+      return this.localData.env === "test";
+    },
+    whole() {
+      return this.totalData.whole || {};
+    },
+    totalDeposit() {
+      return this.whole.total_deposit;
+    },
+    totalFee() {
+      return this.whole.total_fee;
+    }
+  },
+  mounted() {
+    this.getTableData();
+    this.getEnum();
+  },
+  methods: {
+    // 改变订单类型
+    changeOrder() {
+      var haveAll = false;
+      for (var i = 0; i < this.orderType.length; i++) {
+        if (this.orderType[i] == 0) {
+          haveAll = true;
+        }
+      }
+
+      // 选择其他的时候，去掉全部,全部在第一位
+      if (
+        this.orderType[0] == 0 &&
+        1 < this.orderType.length < this.TypeList.length
+      ) {
+        var arr = [];
+        for (var i = 0; i < this.orderType.length; i++) {
+          if (this.orderType[i] != 0) {
+            arr.push(this.orderType[i]);
+          }
+        }
+
+        this.orderType = arr;
+      }
+      // 选择全部的时候去掉其他，全部在最后一位
+      if (this.orderType[this.orderType.length - 1] == 0) {
+        this.orderType = [0];
+      }
+      if (!haveAll && this.orderType.length == this.TypeList.length - 1) {
+        this.orderType = [0];
+      }
+    },
+    // 改变交易类型
+    changeTrade() {
+      var haveAll = false;
+      for (var i = 0; i < this.tradeType.length; i++) {
+        if (this.tradeType[i] == 0) {
+          haveAll = true;
+        }
+      }
+
+      // 选择其他的时候，去掉全部,全部在第一位
+      if (
+        this.tradeType[0] == 0 &&
+        1 < this.tradeType.length < this.tradeList.length
+      ) {
+        var arr = [];
+        for (var i = 0; i < this.tradeType.length; i++) {
+          if (this.tradeType[i] != 0) {
+            arr.push(this.tradeType[i]);
+          }
+        }
+
+        this.tradeType = arr;
+      }
+      // 选择全部的时候去掉其他，全部在最后一位
+      if (this.tradeType[this.tradeType.length - 1] == 0) {
+        this.tradeType = [0];
+      }
+      if (!haveAll && this.tradeType.length == this.tradeList.length - 1) {
+        this.tradeType = [0];
+      }
+    },
+    // 改变支付方式
+    changePay() {
+      var haveAll = false;
+      for (var i = 0; i < this.payType.length; i++) {
+        if (this.payType[i] == 0) {
+          haveAll = true;
+        }
+      }
+
+      // 选择其他的时候，去掉全部,全部在第一位
+      if (
+        this.payType[0] == 0 &&
+        1 < this.payType.length < this.payList.length
+      ) {
+        var arr = [];
+        for (var i = 0; i < this.payType.length; i++) {
+          if (this.payType[i] != 0) {
+            arr.push(this.payType[i]);
+          }
+        }
+
+        this.payType = arr;
+      }
+      // 选择全部的时候去掉其他，全部在最后一位
+      if (this.payType[this.payType.length - 1] == 0) {
+        this.payType = [0];
+      }
+      if (!haveAll && this.payType.length == this.payList.length - 1) {
+        this.payType = [0];
+      }
+    },
+    clickExport() {
+      window.open("/api/admin/job/get_all_periods?action=export");
+    },
+    /**
+     * 获取筛选值
+     */
+    async getEnum() {
+      let { data } = await this.$get("/api/admin/job/getEnum");
+      console.log(data);
+      if (data) {
+        let { jobStatusList, periodStatusList } = data;
+        this.jobStatusList = jobStatusList;
+        this.periodStatusList = periodStatusList;
+      }
+    },
+    // 点击操作
+    clickOperate({ job_id, id }) {
+      if (this.isTest)
+        window.open(
+          `https://dev.test-rooter.proginn.com/main/wage_settlement?job_id=${job_id}&period_id=${id}`
+        );
+      else
+        window.open(
+          `https://rooter.proginn.com/main/wage_settlement?job_id=${job_id}&period_id=${id}`
+        );
+    },
+    // 点击账单
+    clickOrder(i) {
+      if (this.isTest)
+        window.open(
+          `https://dev.test-rooter.proginn.com/main/wage_details?job_id=${i.job_id}&period_id=${i.id}`
+        );
+      else
+        window.open(
+          `https://rooter.proginn.com/main/wage_details?job_id=${i.job_id}&period_id=${i.id}`
+        );
+    },
+    // 点击开发者
+    clickDev(uid) {
+      if (this.isTest)
+        window.open(`https://dev.test.proginn.com/rooter/user/${uid}`);
+      else window.open(`https://www.proginn.com/rooter/user/${uid}`);
+    },
+    // 点击企业
+    clickCompany(uid) {
+      if (this.isTest)
+        window.open(`https://dev.test.proginn.com/rooter/user/${uid}`);
+      else window.open(`https://www.proginn.com/rooter/user/${uid}`);
+    },
+    // 点击账单id
+    clickJobID(jobID) {
+      if (this.isTest)
+        window.open(
+          `https://dev.test.proginn.com/rooter/cloudjobitem/${jobID}`
+        );
+      else window.open(`https://www.proginn.com/rooter/cloudjobitem/${jobID}`);
+    },
+    // 点击重试
+    async clickRetry(id) {
+      const res = await this.$post("/api/admin/payment/redoDraw", { id });
+      // console.log(res)
+    },
+    // 根据状态显示图表样式
+    tableRowClassName({ row, rowIndex }) {
+      // console.log({row, rowIndex})
+      let className = "";
+      if (row.j_status_name === "结束合作") className = "end-row";
+      // console.log(className)
+      return className;
+    },
+    // 格式化列表数据
+    formatTableData(data) {
+      return data.map(i => ({
+        ...i,
+        payAround: `${i.start_time}<br>${i.end_time}`,
+        pre_send_salary_timeShow: new Date(
+          i.pre_send_salary_time * 1000
+        ).toLocaleDateString()
+      }));
+    },
+    /**
+     * 点击筛选确认
+     */
+    clickSearchConfirm() {
+      this.currentPage = 1;
+      this.getTableData();
+    },
+    changePageSize(pageSize) {
+      this.currentPageSize = pageSize;
+      this.getTableData();
+    },
+    // 获取列表数据
+    async getTableData() {
+      this.tableData = [];
+      let url = "/api/admin/job/get_all_periods";
+      let body = { page: this.currentPage, page_size: this.currentPageSize };
+      if (this.status) body.j_status = this.status;
+      if (this.period) body.p_status = this.period;
+      if (this.checkUser) body.chk_user = this.checkUser;
+      if (this.jobID) body.job_id = this.jobID;
+      const res = await this.$post(url, body);
+      const data = res.data;
+      this.tableData = this.formatTableData(data.list);
+      this.totalData = data;
+      // // console.log(this.tableData)
+      this.totalCount = Number(data.total);
+      this.totalPage = data.totalPage;
+      this.localData.env = data.current_env;
+    }
+  }
+};
+</script>
+
+<style scoped>
+#order-wrap {
+  width: 100%;
+}
+#cloud-balance {
+  white-space: nowrap;
+  overflow-x: scroll;
+}
+.top {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 270px;
+}
+.selector-box {
+  /* margin-top: 10px; */
+}
+.selector-box {
+  display: flex;
+  justify-content: space-between;
+}
+/* .selector-box-left {
+} */
+.table {
+  margin-top: 10px;
+  height: calc(100% - 320px);
+}
+.order-table {
+  /* height: calc(100% - 300px); */
+}
+.end-row {
+  background: rgba(0, 0, 0, 0.1);
+}
+.inlineb {
+  display: inline-block;
+}
+.vsub {
+  vertical-align: sub;
+}
+.type-boxs {
+  margin-bottom: 10px;
+}
+.green {
+  color: rgba(37, 155, 36, 1);
+}
+.orange {
+  color: rgba(255, 152, 0, 1);
+}
+.state-success {
+  display: inline-block;
+  padding: 0px 8px;
+  text-align: center;
+  border: 1px solid rgb(48, 142, 255);
+}
+.state-wait {
+  display: inline-block;
+  padding: 0px 8px;
+  text-align: center;
+  border: 1px solid rgb(134, 130, 130);
+}
+
+.state-load {
+  display: inline-block;
+  padding: 0px 8px;
+  text-align: center;
+  border: 1px solid rgb(37, 155, 36);
+}
+.state-faile {
+  display: inline-block;
+  padding: 0px 8px;
+  text-align: center;
+  border: 1px solid rgb(229, 28, 35);
+}
+</style>

plugins/element-ui.js

@@ -1,7 +1,7 @@
-import Vue from 'vue'
-import Element from 'element-ui/lib/element-ui.common'
-import locale from 'element-ui/lib/locale/lang/en'
+import Vue from 'vue';
+import Element from 'element-ui/lib/element-ui.common';
+import locale from 'element-ui/lib/locale/lang/zh-CN';
 
 export default () => {
-  Vue.use(Element, { locale })
-}
+	Vue.use(Element, { locale });
+};