logpm_page/src/views/waybill/EditCustomerInfo.vue

<template>
  <basic-container>
    <div class="avue-crud" ref="avueCrud">
      <div>
        <el-divider style="font-size: 28px"
          >修改订单自编号（{{ info.orderCode }}）客户信息</el-divider
        >
      </div>

      <div class="container">
        <el-form v-model="form">
          <el-form-item label="客户姓名">
            <el-input v-model="form.customerName" placeholder="请输入客户姓名" clearable></el-input>
          </el-form-item>

          <el-form-item label="联系电话">
            <el-input
              v-model="form.customerPhone"
              placeholder="请输入联系电话"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="用户地址">
            <el-input
              v-model="form.customerAddress"
              placeholder="请输入用户地址"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表模块 -->
      <tablecmt
        :columnList="details.columnList"
        :tableData="details.data"
        :loading="details.loadingObj.list"
        @inputTxt="inputsc"
        @timeCheck="timesc"
        @btnCheck="btnsc"
        @selectCheck="selectsc"
        @selection="selectionChange"
      >
        <template #default="slotProps">
          <template v-if="slotProps.scope.column.label === '操作'">
            <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
              包明细
            </el-button>
          </template>
        </template>
      </tablecmt>

      <div class="flex-c-c dialog-footer">
        <el-button icon="Position" type="primary" @click="handleSubmit">提 交</el-button>
        <el-button icon="Refresh" type="primary" @click="handleRefresh">重 置</el-button>
        <el-button icon="Close" @click="handleClose"> 取 消 </el-button>
      </div>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive } from 'vue';
import { getWinHeight } from '@/utils/util.js';
import { useRouter, useRoute } from 'vue-router';
import { columnList } from '@/option/waybill/EditCustomerInfo';
import {
  postOpenOrderAdvancePageList,
  postUpdateCustomerInfo,
} from '@/api/waybill/EditCustomerInfo';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import { deepClone } from '@/utils/util';

const $store = useStore();
const $router = useRouter();
const $route = useRoute();
const { params } = $route;
console.log('params :>> ', params);
const ids = JSON.parse(params.ids as any);
const info = JSON.parse(params.info as any);

console.log('ids :>> ', ids);

const form = ref({
  customerName: '',
  customerPhone: '',
  customerAddress: '',
});

// 页面数据初始化
for (let key in form.value) {
  form.value[key] = info[key];
}

const details = reactive<any>({
  /** 列表 */
  columnList: deepClone(columnList),
  /** 列表数据 */
  data: [],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
  },
  /** 列表Dom节点 */
  listNode: '',
});

// 页面容器实例
const avueCrud = ref(null);

console.log('$route :>> ', $route);

nextTick(() => {
  const _height = getWinHeight();
  const offsetTop = avueCrud.value.offsetTop;
  avueCrud.value.style.height = _height - offsetTop - 20 + 'px';
});

const onLoad = async () => {
  try {
    details.loadingObj.list = true;
    const res = await postOpenOrderAdvancePageList({ advanceIds: ids });
    console.log('res :>> ', res);
    const { code, data } = res.data;
    if (code !== 200) return;
    details.data = data;
  } catch (error) {
  } finally {
    details.loadingObj.list = false;
  }
};

onLoad();

/** 提交 */
const handleSubmit = () => {
  postUpdateCustomerInfo({ ...form.value, advanceIds: ids }).then(res => {
    console.log('res :>> ', res);
    const { code, msg } = res.data;
    if (code === 200) {
      if (msg) ElMessage({ message: msg, type: 'success' });
      $store.commit('EDIT_REFRESHITEM', {
        title: 'TemporaryStorageList',
        status: true,
      });
      $router.back();
      return;
    } else {
      if (msg) ElMessage({ message: msg, type: 'warning' });
    }
  });
};

/** 重置数据 */
const handleRefresh = () => {
  for (let key in form.value) {
    form.value[key] = info[key];
  }
};

/** 关闭 */
const handleClose = () => {
  $store.commit('DEL_TAG_CURRENT');
  $router.back();
};

/** 查看包明细 */
const handleShowPackageOrderList = ({ row }) => {
  $router.push('/waybill/orderPackageList');
};

/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
  details.query[row.prop] = index;
  onLoad();
};

/** 表格表头时间选择 */
const timesc = (index, row) => {
  console.log(index, row);
  if (!!index) {
    index = dayjs(index).format('YYYY-MM-DD');
  }
  details.query[row.prop] = index;
  if (!index) {
    delete details.query[row.prop];
  }
  onLoad();
};

/** 表格表头输入框搜索 */
const btnsc = () => {};

/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  details.query[row.prop] = index;
  if (!index && index !== 0) delete details.query[row.prop];
  if (row.prop === 'certificateTypeName') {
    details.query['certificateType'] = index;
    if (!index) delete details.query['certificateType'];
  }
  onLoad();
};

/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
  details.selectionList = list;
};
</script>

<style lang="scss" scoped>
.container {
  width: 60%;
  margin: 0 auto;
}
</style>