jf-frock/src/views/OrderMannage/BusinessOrderlist/list.vue

<template>
  <div>
    <FullPage
      title="家装订单列表"
      :list="set_list"
      @init="init"
      :loading="loading"
      @searchData="init"
      @changePage="changePage"
      @changeSize="changeSize"
      @selectTable="selectTable"
      :tableColums="computedTable"
      :tableData="tableData"
      :max-height="500"
      :page_index="page_index"
      :showPage="false"
      :total="total"
    >
      <div slot="titleButton" style="display: flex">
        <!-- v-if="persimissionData['批量导出'] || persimissionData.all" -->
        <Button
          @click="handleForceDele"
          type="primary"
          ghost
          style="margin-right: 10px"
          >强制删除</Button
        >
        <Button @click="PrintRow" type="primary" ghost style="margin-right: 10px">批量打印</Button>
        <Upload
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/orders_import'"
        >
          <Button
            v-if="persimissionData['批量导入'] || persimissionData.all"
            type="success"
            ghost
            icon="md-exit"
            style="margin-right: 10px"
            >批量导入</Button
          >
        </Upload>
        <Button
          v-if="persimissionData['批量导出'] || persimissionData.all"
          @click="exportData"
          type="warning"
          ghost
          style="margin-right: 10px"
          icon="md-return-left"
          >批量导出</Button
        >
        <Button
          v-if="persimissionData['批量下测量'] || persimissionData.all"
          type="primary"
          style="margin-right: 10px"
          @click="openLower(selectIds, '测量', '/api/orders_set_measure')"
          ghost
          >批量下测量</Button
        >
        <Button
          v-if="persimissionData['批量下生产'] || persimissionData.all"
          type="primary"
          @click="openLower(selectIds, '生产', '/api/order_oa_people')"
          ghost
          >批量下生产</Button
        >
      </div>
      <div slot="navButton" style="display: flex">
        <!-- v-if="persimissionData['排序设置'] || persimissionData.all" -->
        <Button
          @click="handleSortSet"
          type="primary"
          style="margin-right: 10px"
          ghost
          icon="ios-cog"
          >排序设置</Button
        >
        <Button
          v-if="persimissionData['表头设置'] || persimissionData.all"
          @click="setupTableHeader"
          type="primary"
          style="margin-right: 10px"
          ghost
          icon="ios-cog"
          >设置</Button
        >
        <Button
          v-if="persimissionData['新增订单'] || persimissionData.all"
          @click="addOrder(1)"
          type="primary"
          ghost
          icon="ios-add"
          >新增订单</Button
        >
      </div>
      <template slot="basicTypeSet" slot-scope="{ row }">
        <div>
          <span
            v-for="item in warningList"
            :key="item.id"
            :style="{ color: item.color }"
            v-show="item.id == row.warning_state"
            >{{ item.title }}</span
          >
        </div>
      </template>
      <template slot="set" slot-scope="{ row }">
        <div>
          <!-- v-if="persimissionData['收款'] || persimissionData.all" -->
          <a @click="handleOrderCopy(row)" style="margin: 0 5px">拷贝</a>
          <a
            v-if="persimissionData['收款'] || persimissionData.all"
            @click="handleOpenCharge(row, '收款', '/api/orders_set_measure')"
            style="margin: 0 5px"
            >收款</a
          >
          <a
            v-if="persimissionData['下生产'] || persimissionData.all"
            v-show="row.state < 4"
            @click="openLower(row, '生产', '/api/order_oa_people')"
            style="margin: 0 5px"
            >下生产</a
          >
          <a
            v-if="
              (persimissionData['编辑'] || persimissionData.all) &&
                row.state == 0
            "
            style="margin: 0 5px"
            @click="addOrder(2, row)"
            >编辑</a
          >
          <a
            v-if="persimissionData['详情'] || persimissionData.all"
            style="margin: 0 5px"
            @click="addOrder(3, row)"
            >详情</a
          >
          <a
            v-if="
              (persimissionData['删除'] || persimissionData.all) &&
                row.state == 0
            "
            style="margin: 0 5px"
            @click="delItems(row)"
            >删除</a
          >
        </div>
      </template>
      <template slot="pageSlot">
        <div class="pageSlotStyle">
          <Page
            :page-size-opts="[10, 20, 30, 40, 100, 1000]"
            @on-page-size-change="changeSize"
            @on-change="changePage"
            :current="page_index"
            show-total
            :total="total"
            show-sizer
            :page-size="page_size"
          />
        </div>
      </template>
    </FullPage>
    <Modal
      v-model="chargeModal"
      title="收款"
      @on-ok="handleChargeModalOk"
      @on-cancel="chargeModal = false"
    >
      <div>
        <Form :model="chargeModalForm" :label-width="80">
          <FormItem label="收款项目:">
            <Input
              type="text"
              v-model="chargeModalForm.title"
              placeholder="请输入收款项目"
            />
          </FormItem>
          <FormItem label="收款金额:">
            <Input
              type="text"
              v-model="chargeModalForm.price"
              placeholder="请输入收款金额"
            />
          </FormItem>
          <FormItem label="备注:">
            <Input
              type="text"
              v-model="chargeModalForm.remark"
              placeholder="请输入备注"
            />
          </FormItem>
        </Form>
        <Table
          :columns="modalChargeTablecolumns"
          border
          :data="modalChargeTableData"
        ></Table>
      </div>
    </Modal>
    <Modal
      v-model="showModal"
      title="设置"
      @on-ok="handleModalOk"
      @on-cancel="showModal = false"
    >
      <div class="modal_content">
        <Tabs
          value="name1"
          style="max-height: 700px; overflow: hidden; overflow-y: auto"
        >
          <TabPane label="表单设置" name="name1">
            <Table
              :columns="formModalColumns"
              border
              draggable
              @on-drag-drop="(a, b) => onDragDrop(a, b, formModalTableData, 1)"
              :data="formModalTableData"
            ></Table>
          </TabPane>
          <TabPane label="表头设置" name="name2">
            <Table
              :columns="tableModalColumns"
              border
              draggable
              @on-drag-drop="(a, b) => onDragDrop(a, b, tableModalTableData, 2)"
              :data="tableModalTableData"
            ></Table>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
    <!-- 排序设置弹窗 -->

    <Modal v-model="showSortModal" title="排序设置" width="650">
      <div>
        <Form
          :label-width="80"
          inline
          v-for="(_item, _index) in sortList"
          :key="_index"
        >
          <FormItem :label="'关键字' + (_index + 1)">
            <Select filterable clearable transfer v-model="_item.value">
              <Option
                v-for="item of headerList"
                :key="item.key"
                :label="item.title"
                :disabled="
                  item.title == '操作' ||
                    item.title == '已收款' ||
                    item.title == '未收款'
                "
                :value="item.key"
              ></Option>
            </Select>
          </FormItem>
          <FormItem label="排序方式">
            <Select
              style="width:150px"
              filterable
              clearable
              transfer
              v-model="_item.sort"
            >
              <Option label="升序" :value="1"></Option>
              <Option label="降序" :value="2"></Option>
            </Select>
          </FormItem>
          <FormItem :label-width="10">
            <Icon
              @click="
                handleSortListChange(sortList, 0, _index, {
                  sort: null,
                  level: sortList.length + 1,
                  value: '',
                })
              "
              style="'margin:0 10px"
              size="20"
              type="ios-add"
            />
            <Icon
              @click="handleSortListChange(sortList, 1, _index, null)"
              v-show="sortList.length > 1"
              style="'margin:0 10px"
              size="20"
              type="ios-remove"
            />
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button
          @click="showSortModal = false"
          type="primary"
          style="margin-right: 10px"
          >取消</Button
        >
        <Button
          @click="handleConfirmSort"
          type="primary"
          style="margin-right: 10px"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal v-model="showPrint" title="确认打印" width="300" @on-ok="printOk">
         <div style="text-align:center">是否打印？</div>
    </Modal>
     <div class="print-table" ref="print" style="position: absolute;top:900px;left:100px;background-color:red">
           <table cellspacing="0" cellpadding="0" v-for="(item,index) in newArr" :key="index" class="print-cell">
                <thead>
                <tr>
                    <td colspan="23" style="border: 0;">
                        <div class="table-header">
                            <img class="left-img" :src='$store.state.ip + showTable.logo' alt="" v-show="showTable.logo?true:false">
                            <h1 class="table-title">{{showTable.title}}</h1><img class="right-img1" :src='$store.state.ip + showTable.right_logo1' alt="" v-show="showTable.right_logo1?true:false"><img class="right-img2" :src='$store.state.ip + showTable.right_logo2' alt="" v-show="showTable.right_logo2?true:false">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="23">
                        <p style="text-align: left;padding-left: 20px;"><span class="part_content"
                                style="font-size:16px;margin-right:40px">{{showTable.part_content}}</span><span class="custom">{{showTable.custom}}</span></p>
                    </td>
                </tr>
                <tr class="header">
                    <td rowspan="2">
                        <p>序号</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">位置</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">材质</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">型号</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">工艺</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">木皮/颜色</p>
                    </td>
                    <td>
                        <p>门洞尺寸（MM）</p>
                    </td>
                    <td>
                        <p>门扇尺寸（MM）</p>
                    </td>
                    <td>
                        <p>门套尺寸 （MM）</p>
                    </td>
                    <td rowspan="2">
                        <p>数量</p>
                    </td>
                    <td rowspan="2">
                        <p>单位</p>
                    </td>
                    <td>
                        <p>平方</p>
                    </td>
                    <td rowspan="2">
                        <p>单价</p>
                    </td>
                    <td rowspan="2">
                        <p>附加</p>
                    </td>
                    <td rowspan="2">
                        <p>金额</p>
                    </td>
                    <td rowspan="2">
                        <p>备注</p>
                    </td>
                </tr>
                <tr class="header">

                    <td>
                        <p>高*宽*厚度</p>
                    </td>
                    <td>
                        <p>高*宽*厚度</p>
                    </td>
                    <td>
                        <p>高*宽*厚度</p>
                    </td>

                    <td>
                        <p>米</p>
                    </td>
                </tr>
            </thead>
                <tbody class="content" >
                   <tr v-for="(_item,_index) in item" :key="_index">
                                <td>
                                    <p>{{_item.sort}}</p>
                                </td>
                                <td>
                                    <p>{{_item.postion}}</p>
                                </td>
                                <td>
                                    <p>{{_item.process}}</p>
                                </td>
                                <td>
                                    <p>{{_item.model}}</p>
                                </td>
                                <td>
                                    <p>{{_item.workmanship}}</p>
                                </td>
                                <td>
                                    <p>{{_item.color}}</p>
                                </td>
                                <td>
                                    <p>{{_item.measure1}}</p>
                                </td>
                                <td>
                                    <p>{{_item.measure2}}</p>
                                </td>
                                <td>
                                    <p>{{_item.measure3}}</p>
                                </td>
                                <td>
                                    <p>{{_item.num}}</p>
                                </td>
                                <td>
                                    <p>{{_item.unit}}</p>
                                </td>
                                <td>
                                    <p>{{_item.square}}</p>
                                </td>
                                <td>
                                    <p>{{_item.unit_price}}</p>
                                </td>
                                <td>
                                    <p>{{_item.ext}}</p>
                                </td>
                                <td>
                                    <p>{{_item.price}}</p>
                                </td>
                                <td>
                                    <p>{{_item.remark}}</p>
                                </td>
                     </tr>
                    </tbody>
                   <tfoot>
                <tr>
                    <td class="amount-index" align="center">{{showTable.list.length + 1}}</td>
                    <td colspan="11"></td>
                    <td colspan="2">合计：</td>
                    <td class="xt_total">{{showTable.foot.xt_total}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="12" class="remark" style="padding-left: 20px;">{{showTable.foot.remark}}</td>
                    <td colspan="2">返点：</td>
                    <td class="return">{{showTable.foot.return}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="12" class="remark1" style="padding-left: 20px;">{{showTable.foot.remark1}}</td>
                    <td colspan="2">尾款：</td>
                    <td class="end_price">{{showTable.foot.end_price}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="16" style="padding-left: 20px;">
                        <span class="amount_detail" style="height: 24px;">{{showTable.foot.amount_detail}}</span>
                    </td>
                </tr>

                <tr>
                    <td colspan="16" class="order_info" style="padding-left: 20px;">
                        <!-- 客户备注：<span
                            class="customer_remark">{{showTable.foot.customer_remark}}</span> -->
                            订货日期：<span class="crt_time">{{showTable.foot.crt_time}}</span>交货日期：<span
                            class="end_time">{{showTable.foot.end_time}}</span>业务经理：<span class="saleman">{{showTable.foot.saleman}}</span>制单人：<span
                            class="crt_id">{{showTable.foot.crt_id}}</span>审核：<span class="oa">{{showTable.foot.oa}}</span>客户确认：<span class="is_confirm">{{showTable.foot.is_confirm}}</span></td>
                </tr>
            </tfoot>
              </table>
        </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      showTableContentStr:[],
      showTable:{
                list:[],
                foot:{}
            },
       newArr:'',
      printData:[],
      showPrint:false,
      tableColums: [
        {
          type: "selection",
          align: "center",
          key: "selection",
          minWidth: 100,
          fixed: "left",
          title: "全选",
        },
        { title: "订单编号", align: "center", key: "order_no", minWidth: 200 },
        {
          title: "项目名称",
          align: "center",
          key: "residential_name",
          minWidth: 200,
        },
        { title: "业务员", align: "center", key: "nickname", minWidth: 150 },
        {
          title: "负责人",
          align: "center",
          key: "leading_name",
          minWidth: 150,
        },
        {
          title: "客户姓名",
          align: "center",
          key: "client_name",
          minWidth: 150,
        },
        { title: "客户地址", align: "center", key: "address", minWidth: 200 },
        {
          title: "紧急程度",
          align: "center",
          key: "warning_state",
          minWidth: 100,
          slot: "basicTypeSet",
        },
        {
          title: "产品总价",
          align: "center",
          key: "predict_price",
          minWidth: 120,
        },
        { title: "折扣金额", align: "center", key: "fax_price", minWidth: 120 },
        {
          title: "订单金额",
          align: "center",
          key: "price",
          minWidth: 120,
          render(h, params) {
            return h(
              "span",
              {},
              (params.row.predict_price - params.row.fax_price).toFixed(2)
            );
          },
        },
        { title: "已收款", align: "center", key: "get_money", minWidth: 120 },
        {
          title: "未收款",
          align: "center",
          key: "unget_money",
          minWidth: 120,
          render(h, params) {
            return h(
              "span",
              {},
              (
                params.row.predict_price -
                params.row.fax_price -
                params.row.get_money
              ).toFixed(2)
            );
          },
        },
        {
          title: "备注",
          align: "center",
          key: "remark",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: "订单开始日期",
          align: "center",
          minWidth: 180,
          key: "start_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.start_time, 1)),
        },
        {
          title: "订单交付日期",
          align: "center",
          minWidth: 180,
          key: "end_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.end_time, 1)),
        },
        {
          title: "生产进度",
          align: "center",
          key: "complete_rate",
          minWidth: 180,
          render(h, params) {
            return h(
              "span",
              {},
              parseInt(params.row.complete_rate * 100) + "%"
            );
          },
        },
        {
          title: "订单状态",
          align: "center",
          key: "state",
          minWidth: 150,
          render: (h, params) =>
            h(
              "span",
              {},
              params.row.state == 0
                ? "订单未审核"
                : params.row.state == 1
                ? "测量未审核"
                : params.row.state == 2
                ? "测量审核中"
                : params.row.state == 3
                ? "测量通过"
                : params.row.state == 4
                ? "生产中"
                : params.row.state == 5
                ? "生产审核中"
                : params.row.state == 6
                ? "生产通过"
                : params.row.state == 7
                ? "到生产计划"
                : params.row.state == 8
                ? "派工"
                : params.row.state == 9
                ? "包装"
                : params.row.state == 10
                ? "发货"
                : "安装"
            ),
        },
        {
          title: "制单人",
          align: "center",
          minWidth: 180,
          key: "crt_name",
          // render: (h, params) => {
          //   const { row } = params;
          //   let text = "";
          //   this.users.map(
          //     (item) => item.id == row.crt_id && (text = item.nickname)
          //   );
          //   return h("span", {}, text);
          // },
        },
        {
          title: "订单创建时间",
          align: "center",
          minWidth: 180,
          key: "crt_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.crt_time)),
        },
        // {
        //   title: '预估交付日期', align: 'center', minWidth: 200, key: 'predict_time',
        //   render: (h, params) => h('span', {}, this.func.replaceDate(params.row.predict_time, 1))
        // },
        {
          title: "操作",
          align: "center",
          key: "set",
          slot: "set",
          fixed: "right",
          minWidth: 220,
        },
      ],
      modalChargeTablecolumns: [
        { title: "收款项目", align: "center", key: "title" },
        { title: "收款金额", align: "center", key: "price" },
        {
          title: "收款时间",
          align: "center",
          key: "crt_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.crt_time)),
        },
        { title: "收款备注", align: "center", key: "remark" },
      ],
      modalChargeTableData: [],
      client_name_list:[],
      address_list:[],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: 0,
      show_lower: false,
      postInfo: {
        //下测量数据
        order_no: "",
        start_time: "",
        end_time: "",
        user_id: null,
      },
      users: [],
      selectIds: null,
      loading: false,
      proxyObj: {},
      headers: { Authorization: localStorage.getItem("token") },
      showModal: false,
      formModalColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.formModalTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.formModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.formModalTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.formModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      formModalTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "client_name",
          value: "客户姓名",
          title: "客户姓名",
        },
        { is_show: true, key: "address", value: "客户地址", title: "客户地址" },
        { is_show: true, key: "salesman", value: "业务员", title: "业务员" },
        { is_show: true, key: "state", value: "订单状态", title: "订单状态" },
        { is_show: true, key: "crt_id", value: "制单人", title: "制单人" },
        {
          is_show: true,
          key: "leading_name",
          value: "负责人",
          title: "负责人",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "",
          value: "订单创建时间",
          title: "订单创建时间",
        },
      ],
      formSet: [],
      tableModalColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableModalTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.tableModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableModalTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
                disabled: currentRow.title == "全选" ? true : false,
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.tableModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      sub_formModalTableData: [],
      tableModalTableData: [
        { is_show: true, key: "selection", value: "全选", title: "全选" },
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        { is_show: true, key: "nickname", value: "业务员", title: "业务员" },
        {
          is_show: true,
          key: "client_name",
          value: "客户姓名",
          title: "客户姓名",
        },
        { is_show: true, key: "address", value: "客户地址", title: "客户地址" },
        {
          is_show: true,
          key: "leading_name",
          value: "负责人",
          title: "负责人",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "predict_price",
          value: "产品总价",
          title: "产品总价",
        },
        {
          is_show: true,
          key: "fax_price",
          value: "折扣金额",
          title: "折扣金额",
        },
        { is_show: true, key: "price", value: "订单金额", title: "订单金额" },
        { is_show: true, key: "get_money", value: "已收款", title: "已收款" },
        { is_show: true, key: "unget_money", value: "未收款", title: "未收款" },
        { is_show: true, key: "remark", value: "备注", title: "备注" },
        {
          is_show: true,
          key: "start_time",
          value: "订单开始日期",
          title: "订单开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "订单交付日期",
          title: "订单交付日期",
        },
        {
          is_show: true,
          key: "complete_rate",
          value: "生产进度",
          title: "生产进度",
        },
        { is_show: true, key: "state", value: "订单状态", title: "订单状态" },
        { is_show: true, key: "crt_name", value: "制单人", title: "制单人" },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          title: "订单创建时间",
        },
        { is_show: true, key: "set", value: "操作", title: "操作" },
      ],
      sub_tableModalTableData: [],
      tableSet: [],
      currencyPageId: null,
      chargeModal: false,
      chargeModalForm: {
        order_no: null,
        title: null,
        price: null,
        remark: null,
      },
      warningList: [],
      showSortModal: false,
      sortList: [{ sort: null, level: 1, value: "" }],
      headerList: [],
      leadingList: [],
    };
  },
  computed: {
    ...mapState(["persimissionData"]),
    set_list() {
      if (this.sub_formModalTableData.length < 1) {
        this.list;
      }
      return this.func.computedForm(this.sub_formModalTableData, this.list);
    },
    list() {
      return [
        {
          title: "订单编号",
          name: "Input",
          placeholder: "请输入订单编号",
          value: "",
          serverName: "order_no",
        },
        {
          title: "项目名称",
          name: "Input",
          placeholder: "请输入项目名称",
          value: "",
          serverName: "residential_name",
        },
        {
          title: "客户姓名",
          name: "Select",
          placeholder: "请输入客户姓名",
          filterable: true,
          value: "",
          serverName: "client_name",
          optionName: "client_name",
          optionValue: "client_name",
          option: this.client_name_list,
        },
        {
          title: "客户地址",
          name: "Select",
          placeholder: "请输入客户地址",
          filterable: true,
          value: "",
          serverName: "address",
          optionName: "address",
          optionValue: "address",
          option: this.address_list,
        },
        {
          title: "业务员",
          name: "Select",
          placeholder: "请输入业务员",
          filterable: true,
          value: "",
          serverName: "salesman",
          optionName: "nickname",
          optionValue: "nickname",
          option: this.users,
        },
        {
          title: "订单状态",
          name: "Select",
          placeholder: "请选择订单状态",
          serverName: "state",
          value: "",
          option: [
            { label: "全部", value: 0 },
            { label: "测量未审核", value: 1 },
            { label: "测量审核中", value: 2 },
            { label: "测量通过", value: 3 },
            { label: "生产中", value: 4 },
            { label: "生产审核中", value: 5 },
            { label: "生产通过", value: 6 },
            { label: "到生产计划", value: 7 },
            { label: "派工", value: 8 },
            { label: "包装", value: 9 },
            { label: "发货", value: 10 },
            { label: "安装", value: 11 },
          ],
        },
        {
          title: "紧急程度",
          name: "Select",
          placeholder: "请选择紧急程度",
          optionName: "title",
          optionValue: "id",
          serverName: "warning_state",
          value: "",
          option: this.warningList,
        },
        {
          title: "制单人",
          name: "Select",
          placeholder: "请选择制单人",
          filterable: true,
          value: "",
          serverName: "crt_id",
          optionName: "nickname",
          optionValue: "id",
          option: this.users,
        },
        {
          title: "负责人",
          name: "Select",
          placeholder: "请选择负责人",
          filterable: true,
          value: "",
          serverName: "leading_name",
          optionName: "leading_name",
          optionValue: "leading_name",
          option: this.leadingList,
        },
        {
          title: "订单创建时间",
          start_server: "start_time",
          end_server: "end_time",
          name: "Input",
          start_value: "",
          end_value: "",
          isDate: true,
          start_placeholder: "开始日期",
          end_placeholder: "结束日期",
        },
      ];
    },
    computedTable() {
      if (this.sub_tableModalTableData.length < 1) {
        return this.tableColums;
      }
      return this.func.computedHeader(
        this.sub_tableModalTableData,
        this.tableColums
      );
    },
  },
  watch: {
    computedTable() {
      if (this.computedTable[0].title == "全选") {
        this.headerList = JSON.parse(JSON.stringify(this.computedTable));
        this.headerList.splice(0, 1);
      } else {
        this.headerList = this.computedTable;
      }
    },
  },
  created() {
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
    // 获取负责人
    this.axios.get("/api/custom__detail_list").then((res) => {
      this.leadingList = res.data;
    });
    this.axios("/api/user", { params: { type: 1 } }).then(
      (res) => (this.users = res.data.data)
    );
    // this.$store.state.navgationData[0].sub[0].sub[0]
    this.currencyPageId = this.$store.state.navgationData[0].sub[0].sub[0].id;
  },
  beforeRouteLeave(to, from, next) {
    if (to.path != "/cms/ordermannage/businessorderlist/edit") {
      this.$route.meta.keepAlive = false;
    } else {
      this.$route.meta.keepAlive = true;
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getData(vm.proxyObj);
    });
  },
  methods: {
    chunk(array, size) {
            //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
            const length = array.length
            //判断不是数组，或者size没有设置，size小于1，就返回空数组
            if (!length || !size || size < 1) {
              return []
            }
            //核心部分
            let index = 0 //用来表示切割元素的范围start
            let resIndex = 0 //用来递增表示输出数组的下标
          
            //根据length和size算出输出数组的长度，并且创建它。
            let result = new Array(Math.ceil(length / size))
            //进行循环
            while (index < length) {
              //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
              result[resIndex++] = array.slice(index, (index += size))
            }
            //输出新数组
            return result
          },
    PrintRow(){
         this.printData.forEach(v=>{
           this.axios({
            method:'get',
            url:'/api/printe_order_detail',
            params:{
               ...v
            }
        }).then(res=>{
            console.log(res)
            this.showTableContentStr = res.msg.list
            this.showTable = res.msg
            this.newArr = this.chunk(this.showTableContentStr,15)
        });
         })
         this.showPrint = true;
    },
    printOk(){
     
    },
    init(row) {
      this.page_index = 1;
      row.page_index = this.page_index;
      row.page_size = this.page_size;
      this.proxyObj = row;
      this.getData(row);
    },
    getData(row) {
      this.loading = true;
      this.axios("/api/order_list_new", {
        params: { ...row },
      }).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          if (!res.data.data) {
            return this.$Message.error("列表数据返回格式不正确");
          }
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.handleSetHeader(res);
          
         for(let i = 0;i<res.data.address.length;i++){
           this.address_list.push({address:res.data.address[i]})
         }
          for(let i = 0;i<res.data.client_name.length;i++){
           this.client_name_list.push({client_name:res.data.client_name[i]})
         }
        }
      });
    },
    handleSetHeader(res) {
      this.tableModalTableData =
        res.data.tableSet.tableSet.length < 1
          ? this.tableModalTableData
          : res.data.tableSet.tableSet;
      this.formModalTableData =
        res.data.tableSet.formSet.length < 1
          ? this.formModalTableData
          : res.data.tableSet.formSet;
      this.sub_formModalTableData = JSON.parse(
        JSON.stringify(this.formModalTableData)
      );
      this.sub_tableModalTableData = JSON.parse(
        JSON.stringify(this.tableModalTableData)
      );
    },
    changePage(e) {
      this.page_index = e;
      this.proxyObj.page_index = this.page_index;
      const sortList = this.sortList.filter((item) => item.sort);
      this.proxyObj.sortList = sortList;
      this.getData(this.proxyObj);
    },
    changeSize(e) {
      this.page_size = e;
      this.proxyObj.page_size = this.page_size;
      const sortList = this.sortList.filter((item) => item.sort);
      this.proxyObj.sortList = sortList;
      this.getData(this.proxyObj);
    },
    addOrder(n, row) {
      let order_no = row ? row.order_no : "";
      this.$router.push({
        path:
          this.$store.state.userInfo.is_agent == 1
            ? "/cms/ordermannage/businessorderlist/agentorder"
            : "/cms/ordermannage/businessorderlist/edit",
        query: {
          type: n,
          order_no,
        },
      });
    },

    handleChargeModalOk() {
      this.axios
        .post("/api/order_price_add", { ...this.chargeModalForm })
        .then((res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.chargeModal = false;
          }
        });
    },
    handleOrderCopy(row) {
      this.axios
        .post("/api/support_order_copy", { order_no: row.order_no })
        .then((res) => {
          if (res.code == 200) {
            this.init(this.proxyObj);
          }
        });
    },
    handleOpenCharge(row) {
      this.chargeModalForm.order_no = row.order_no;
      this.chargeModalForm.title = "";
      this.chargeModalForm.price = "";
      this.chargeModalForm.remark = "";
      this.axios
        .get("/api/order_price", { params: { order_no: row.order_no } })
        .then((res) => {
          this.modalChargeTableData = res.data;
          this.chargeModal = true;
          this.init(this.proxyObj);
        });
    },
    openLower(row, title, url) {
      console.log("row :>> ", row);
      if (!row) {
        return this.$Message.warning("请至少选择一项");
      }
      this.postInfo.order_no = Array.isArray(row)
        ? row.join(",")
        : row.order_no;
        if(title==="测量"){ this.$Modal.confirm({
        title: "批量下测量",
        content: "确定下测量？",
        onOk: () => {
          this.axios({
            method: "post",
            url,
            data: {
              order_no: this.postInfo.order_no,
            },
          }).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              this.getData(this.proxyObj);
            }
          });
        },
        onCancel: () => {},
      });}
      else{
      this.$Modal.confirm({
        title: "批量下生产",
        content: "确定下生产？",
        onOk: () => {
          this.axios({
            method: "post",
            url,
            data: {
              order_no: this.postInfo.order_no,
            },
          }).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              this.getData(this.proxyObj);
            }
          });
        },
        onCancel: () => {},
      });}
      // this.dowmMeasurement({
      //   url,
      //   title,
      //   params: this.postInfo,
      //   then: () => {
      //     this.selectIds = [];
      //     this.postInfo = {};
      //     this.getData(this.proxyObj);
      //   },
      //   cancel: () => {
      //     this.postInfo = {};
      //   },
      // });
    },
    selectTable(e) {
      let result = [];
      let printData=[];
      e.map(item=>{
        printData.push({order_no:item.order_no,box_id:item.box_id})
      })
      e.map((v) => result.push(v.order_no));
      this.selectIds = result;
      this.printData = printData;
      console.log(this.printData);
    },
    delItems(row) {
      this.confirmDelete({
        content: "确认删除么？",
        then: () => {
          this.axios
            .post("/api/order_del", { order_no: row.order_no, state: 0 })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.getData(this.proxyObj);
              }
            });
        },
      });
    },
    handleForceDele() {
      if (this.selectIds && this.selectIds.length > 0) {
        const p_list = this.selectIds.map((item) => {
          return this.axios.post("/api/support_order_del", { order_no: item });
        });
        Promise.all(p_list).then((list) => {
          this.init(this.proxyObj);
        });
      } else {
        this.$Message.warning("请选择数据");
      }
    },
    async exportData() {
      const res = await this.axios("/api/orders_export", {
        params: { ...this.proxyObj },
      });
      if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`;
        location.href = url;
      }
    },
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
      this.getData(this.proxyObj);
    },
    uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    setupTableHeader() {
      this.showModal = true;
      return;
    },
    handleSortSet() {
      this.showSortModal = true;
    },
    handleSortListChange(arr, type, index, obj) {
      if (obj) {
        arr.splice(index + 1, type, obj);
      } else {
        arr.splice(index, type);
      }
    },
    handleConfirmSort() {
      if (
        this.sortList.length > 1 ||
        (this.sortList.length == 1 && this.sortList[0].sort)
      ) {
        this.loading = true;
        this.axios("/api/order_list_new", {
          params: { ...this.proxyObj, sortList: this.sortList },
        }).then((res) => {
          if (res.code == 200) {
            this.loading = false;
            if (!res.data.data) {
              return this.$Message.error("列表数据返回格式不正确");
            }
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.showSortModal = false;
            // this.tableModalTableData =
            //   res.data.tableSet.tableSet.length < 1
            //     ? this.tableModalTableData
            //     : res.data.tableSet.tableSet;
            // this.formModalTableData =
            //   res.data.tableSet.formSet.length < 1
            //     ? this.formModalTableData
            //     : res.data.tableSet.formSet;
            // this.sub_formModalTableData = JSON.parse(
            //   JSON.stringify(this.formModalTableData)
            // );
            // this.sub_tableModalTableData = JSON.parse(
            //   JSON.stringify(this.tableModalTableData)
            // );
          }
        });
      } else {
        this.showSortModal = false;
      }
    },
    onDragDrop(a, b, table, type) {
      if (type == 2 && (a == 0 || b == 0)) {
        return this.$Message.warning("全选位置不可变");
      }
      table.splice(b, 0, ...table.splice(a, 1));
    },
    handleModalOk() {
      this.formModalTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.tableModalTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.axios({
        method: "post",
        url: "/api/update/table",
        data: {
          id: this.currencyPageId,
          result: {
            formSet: this.formModalTableData,
            tableSet: this.tableModalTableData,
          },
        },
      }).then((res) => {
        this.$Message.success(res.msg);
        this.init(this.proxyObj);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pageSlotStyle {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.modal_content {
  display: flex;
  justify-content: center;
  // width: 500px;
}
/deep/.ivu-tabs-nav-scroll {
  display: flex;
  justify-content: center;
}

.printcontent{
    overflow-y: auto;
    overflow-x: auto;
}
 

    h1 {
        text-align: center;
        font-size: 18px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    p {
        text-align: center;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    td {
        border: 1px solid #000;

    }

    .right-img1 {
        position: absolute;
        right: 0;
        width: 150px;
        margin-bottom: 10px;
        height: 60px;
        top: 0;
    }

    .right-img2 {
        position: absolute;
        width: 150px;
        right: 180px;
        margin-bottom: 10px;
        height: 60px;
        top: 0;
    }

    .table-header {
        position: relative;
        height: 76px;
        line-height: 76px;
    }

    .left-img {
        position: absolute;
        left: 0;
        width: 150px;
        height: 60px;
        top: 0;
    }

    .table-box {
        padding: 0;
        width: 1000px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .order_info span {
        margin-right: 28px;
    }

    .pageSeparator {
        visibility: hidden;
        page-break-after: always;
        overflow: hidden;
        height: 0px;
    }
    #show-table {
        padding: 15px;
    }
    .print-table{
        display: none;
    }
    @media print {
        button {
            display: none;
        }
        .print-table{
            display: block;
            width: 100%;
        }
        .print-cell{
            color: black;
            margin:16mm 8mm;
            width: 262mm;
            height: auto;
        }
        #show-table{
           display: none;
           
        }
        @page {
        }
    }
</style>