jf-frock/src/views/BidSystem/ContractList/list.vue

<template>
  <div class="BidsList">
    <FullPage
      title="工装订单列表"
      :list="set_list"
      @init="init"
      :loading="loading"
      @searchData="init"
      @selectTable="selectTable"
      @changePage="changePage"
      @changeSize="changeSize"
      :tableColums="computedTable"
      :showPage="false"
      :tableData="tableData"
      :page_index="page_index"
      :total="total"
    >
      <div slot="titleButton" style="display: flex">
        <Upload
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/order_area_import'"
        >
          <Button type="success" ghost icon="md-exit" style="margin-right: 10px"
            >导入</Button
          >
        </Upload>
        <Button
          @click="exportData"
          type="warning"
          ghost
          icon="md-return-left"
          style="margin-right: 10px"
          >导出</Button
        >
        <Button
          @click="handleToEditpage(1)"
          type="primary"
          ghost
          style="margin-right: 10px"
          >新增</Button
        >
      </div>
      <div slot="navButton" style="display: flex">
        <Button
          v-if="persimissionData['表头设置'] || persimissionData.all"
          @click="setupTableHeader"
          type="primary"
          style="margin-right: 10px"
          ghost
          icon="ios-cog"
          >设置</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, index }">
        <div>
          <a
            style="margin: 0 5px"
            :disabled="row.sub_status != 0"
            @click="handleSet(row, index, 1)"
            >深化</a
          >
          <a
            style="margin: 0 5px"
            :disabled="row.sub_status != 0"
            @click="handleSet(row, index, 2)"
            >编辑</a
          >
          <a style="margin: 0 5px" @click="handleSet(row, index, 3)">详情</a>
          <a
            style="margin: 0 5px"
            :disabled="row.sub_status != 0"
            @click="handleSet(row, index, 4)"
            >删除</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="processModal"
      title="下深化"
      @on-ok="handleProcess"
      @on-cancel="processModal = false"
    >
      <div>
        <div class="process_modal">
          <span>深化人员:</span>
          <Select v-model="process_man" style="width: 150px">
            <Option
              v-for="item in processManList"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            ></Option>
          </Select>
        </div>
        <div class="process_modal">
          <span>选择时间:</span>
          <DatePicker
            type="date"
            v-model="process_start_time"
            placeholder="年/月/日"
            style="width: 150px"
          ></DatePicker>
          至
          <DatePicker
            type="date"
            v-model="process_end_time"
            placeholder="年/月/日"
            style="width: 150px"
          ></DatePicker>
        </div>
      </div>
    </Modal>
    <Modal
      v-model="showModal"
      title="设置"
      @on-ok="handleModalOk"
      @on-cancel="showModal = false"
    >
      <div class="modal_content">
        <Tabs value="name1">
          <TabPane label="表单设置" name="name1">
            <Table
              :columns="formModalColumns"
              border
              :data="formModalTableData"
            ></Table>
            <!-- @on-drag-drop="(a,b)=>onDragDrop(a,b,formModalTableData)" -->
          </TabPane>
          <TabPane label="表头设置" name="name2">
            <Table
              :columns="tableModalColumns"
              border
              draggable
              @on-drag-drop="(a, b) => onDragDrop(a, b, tableModalTableData)"
              :data="tableModalTableData"
            ></Table>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { mapState } from "vuex";

export default {
  name: "BidSystemContractList",
  data() {
    // 这里存放数据
    return {
      tableColums: [
        {
          type: "selection",
          align: "center",
          key: "selection",
          minWidth: 100,
          fixed: "left",
          title: "全选",
        },
        { title: "订单号", align: "center", key: "order_no", minWidth: 150 },
        {
          title: "项目名称",
          align: "center",
          key: "residential_name",
          minWidth: 120,
        },
        { title: "详细地址", align: "center", key: "address", minWidth: 200 },
        // {
        //   title: '订单类型', align: 'center', key: 'renovation_type', minWidth: 100,
        //   render: (h, params) => h('span', {}, params.row.renovation_type == 1 ? '工装' : '家装')
        // },
        {
          title: "客户姓名",
          align: "center",
          key: "client_name",
          minWidth: 120,
        },
        { title: "手机号", align: "center", key: "mobile", minWidth: 150 },
        {
          title: "紧急程度",
          align: "center",
          key: "warning_state",
          minWidth: 100,
          slot: "basicTypeSet",
        },
        {
          title: "业务员",
          align: "center",
          key: "salesman",
          minWidth: 100,
          // render: (h, params) => {
          //   let name = ''
          //   this.salesmanList.forEach(el => {
          //     if (el.id == params.row.salesman) {
          //       name = el.nickname
          //     }
          //   })
          //   return h('span', {}, name
          //   )
          // }
        },
        {
          title: "开始日期",
          align: "center",
          key: "start_time",
          minWidth: 150,
          render: (h, params) =>
            h("span", {}, this.func.replaceDateNoHMS(params.row.start_time)),
        },
        {
          title: "交付日期",
          align: "center",
          key: "end_time",
          minWidth: 150,
          render: (h, params) =>
            h("span", {}, this.func.replaceDateNoHMS(params.row.end_time)),
        },
        {
          title: "订单状态",
          align: "center",
          key: "state",
          minWidth: 100,
          render: (h, params) =>
            h(
              "span",
              {},
              params.row.state == 0
                ? "待审核"
                : params.row.warning_state == 1
                ? "待拆单"
                : params.row.warning_state == 2
                ? "待生产"
                : "已完成"
            ),
        },
        {
          title: "下单日期",
          align: "center",
          key: "crt_time",
          minWidth: 150,
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.crt_time)),
        },
        {
          title: "操作",
          align: "center",
          key: "set",
          slot: "set",
          fixed: "right",
          minWidth: 200,
          fixed: "right",
        },
      ],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: 0,
      loading: false,
      proxyObj: {},
      headers: { Authorization: localStorage.getItem("token") },
      selects: [],
      salesmanList: [],
      processModal: false,
      process_man: "",
      processManList: [],
      process_start_time: "",
      process_end_time: "",
      order_no: "",
      showModal: false,
      currencyPageId: null,
      formModalColumns: [
        { type: "index", minWidth: 30, align: "center" },
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { row, 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,
          render: (h, params) => {
            const { row, index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.formModalTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.value,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.value = e.target.value;
                  this.formModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      formModalTableData: [],
      tableModalColumns: [
        { type: "index", minWidth: 30, align: "center" },
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { row, 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,
          render: (h, params) => {
            const { row, index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableModalTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.value,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.value = e.target.value;
                  this.tableModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      tableModalTableData: [
        // { is_show: true, key: 'selection', value: '全选' },
        // { is_show: true, key: 'order_no', value: '订单编号' },
        // { is_show: true, key: 'residential_name', value: '项目名称' },
        // { is_show: true, key: 'address', value: '详细地址' },
        // { is_show: true, key: 'client_name', value: '客户姓名' },
        // { is_show: true, key: 'mobile', value: '手机号' },
        // { is_show: true, key: 'warning_state', value: '紧急程度' },
        // { is_show: true, key: 'salesman', value: '业务员' },
        // { is_show: true, key: 'start_time', value: '开始日期' },
        // { is_show: true, key: 'end_time', value: '交付日期' },
        // { is_show: true, key: 'state', value: '订单状态' },
        // { is_show: true, key: 'crt_time', value: '下单日期' },
        // { is_show: true, key: 'set', value: '操作' },
      ],
      warningList: [],
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.currencyPageId = this.$store.state.navgationData[0].sub[1].sub[0].id;
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.axios("/api/user").then((res) => {
      (this.salesmanList = res.data.data),
        (this.processManList = res.data.data);
    });
  },
  methods: {
    handleProcess() {
      this.axios({
        method: "get",
        url: "/api/order_area_pull",
        params: {
          order_no: this.order_no,
          sub_status: 1,
          process_man: this.process_man,
          process_start_time: this.func.replaceDateNoHMS(
            this.process_start_time
          ),
          process_end_time: this.func.replaceDateNoHMS(this.process_end_time),
        },
      })
        .then((res) => {
          this.$Message.success(res.msg);
          this.getData(this.proxyObj);
        })
        .catch((err) => {});
    },
    //1深化  2编辑  3详情  4删除  0新增
    handleSet(row, index, type) {
      switch (type) {
        case 1:
          this.processModal = true;
          this.order_no = row.order_no;
          break;
        case 2:
          this.$router.push({
            path: "/cms/BidSystem/ContractList/edit",
            query: {
              type,
              order_no: row.order_no,
            },
          });
          break;
        case 3:
          this.$router.push({
            path: "/cms/BidSystem/ContractList/info",
            query: {
              type,
              order_no: row.order_no,
            },
          });
          break;
        case 4:
          this.$Modal.confirm({
            title: "确认删除？",
            content: "此操作确认后不可恢复，请确认！",
            onOk: () => {
              this.axios({
                method: "get",
                url: "/api/order_area_del",
                params: {
                  order_no: row.order_no,
                },
              })
                .then((res) => {
                  this.$Message.success(res.msg);
                  this.getData(this.proxyObj);
                })
                .catch((err) => {});
            },
            onCancel: () => {},
          });
          break;
      }
    },
    handleToEditpage(type) {
      this.$router.push({
        path: "/cms/BidSystem/ContractList/edit",
        query: {
          type,
        },
      });
    },
    init(row) {
      this.page_index = 1;
      row.page_index = this.page_index;
      row.page_size = this.page_size;
      // 0 业务单
      row.sub_status = 0;
      this.proxyObj = row;
      this.getData(row);
    },
    getData(row) {
      this.loading = true;
      this.axios("/api/order_area", { params: row }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.tableModalTableData = res.data.tableSet.tableSet || [];
        this.total = res.data.total;
      });
    },
    setupTableHeader() {
      this.showModal = true;
      return;
    },
    changePage(e) {
      this.page_index = e;
      this.proxyObj.page_index = this.page_index;
      this.getData(this.proxyObj);
    },
    changeSize(e) {
      this.page_size = e;
      this.proxyObj.page_size = this.page_size;
      this.getData(this.proxyObj);
    },
    async exportData() {
      const res = await this.axios("/api/measure_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 || "上传失败");
    },
    selectTable(e) {
      this.selects = e;
    },
    onDragDrop(a, b, table) {
      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);
        })
        .catch((err) => {});
    },
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState(["persimissionData"]),
    computedTable() {
      if (this.tableModalTableData.length < 1) {
        return this.tableColums;
      }
      return this.func.computedHeader(
        this.tableModalTableData,
        this.tableColums
      );
    },
    set_list() {
      return [
        {
          title: "订单编号",
          serverName: "order_no",
          name: "Input",
          value: "",
          placeholder: "请输入订单号",
        },
        {
          title: "项目名称",
          name: "Input",
          placeholder: "请输入",
          value: "",
          serverName: "residential_name",
        },
        {
          title: "客户昵称",
          name: "Input",
          placeholder: "请输入",
          value: "",
          serverName: "client_name",
        },
        {
          title: "手机号",
          name: "Input",
          placeholder: "请输入",
          value: "",
          serverName: "mobile",
        },
        {
          title: "订单状态",
          name: "Select",
          placeholder: "请选择",
          serverName: "state",
          value: "",
          option: [
            { label: "待审核", value: 0 },
            { label: "待拆单", value: 1 },
            { label: "待生产", value: 2 },
            { label: "已完成", value: 3 },
          ],
        },
        // {
        //   title: '订单类型', name: 'Select', placeholder: '请选择', serverName: 'type', value: '',
        //   option: [
        //     { label: '工装', value: 1 },
        //     { label: '家装', value: 2 },
        //   ]
        // },
        {
          title: "紧急程度",
          name: "Select",
          serverName: "warning_state",
          placeholder: "请选择",
          value: "",
          optionName: "title",
          optionValue: "id",
          option: this.warningList,
        },
      ];
    },
  },
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.pageSlotStyle {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.process_modal {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
</style>