logpm_page/src/views/basicdata/carrier/basicdataCarrier.vue

<template>
  <basic-container v-loading="details.loadingObj.pageLoading">
    <div class="avue-crud">
      <!-- 搜索模块 -->
      <div v-h5uShow="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="header_search">
          <template v-for="item in details.columnList" :key="item.prop">
            <el-form-item v-if="item.isTitleSearch" :label="item.label">
              <!-- 普通输入框 -->
              <template v-if="item.type === 2">
                <el-input
                  class="w100"
                  :placeholder="`请输入${item.label}`"
                  v-model="details.query[item.prop]"
                  clearable
                ></el-input>
              </template>

              <!-- 下拉框 -->
              <template v-else-if="item.type === 3">
                <el-select
                  v-model="details.query[item.prop.replace('Name', '')]"
                  :placeholder="`请选择${item.label}`"
                  class="w100"
                  clearable
                  filterable
                  @change="
                    val => {
                      !val && delete details.query[item.prop.replace('Name', '')];
                    }
                  "
                  :multiple="item.multiple || false"
                >
                  <el-option
                    v-for="val in item.checkarr"
                    :key="val.value"
                    :label="val.label"
                    :value="val.value"
                  />
                </el-select>
              </template>
            </el-form-item>
          </template>

          <!-- 查询按钮 -->
          <el-form-item class="el-btn">
            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="searchReset">清 空</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 控件模块 -->
      <div class="avue-crud__header">
        <!-- 头部左侧按钮模块 -->
        <div class="avue-crud__left">
          <!-- 新增 -->
          <el-button type="primary" icon="Plus" @click="handleAdd">新 增</el-button>
          <!-- 删除 -->
          <el-button type="primary" icon="Delete" @click="() => handleDelete(true)">
            删 除
          </el-button>
        </div>

        <!-- 头部右侧按钮模块 -->
        <div class="avue-crud__right">
          <el-button icon="Download" @click="handleExportData" circle></el-button>
          <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
          <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
          <el-button icon="Search" @click="searchHide" circle></el-button>
        </div>
      </div>

      <!-- 列表模块 -->
      <tablecmt
        :columnList="details.columnList"
        :tableData="data"
        :loading="loadingObj.list"
        @inputTxt="inputsc"
        @timeCheck="timesc"
        @selectCheck="selectsc"
        @selection="selectionChange"
      >
        <template #default="slotProps">
          <template v-if="slotProps.scope.column.label === '操作'">
            <el-text @click="handleDelete(false, slotProps.scope.row)"> 删除 </el-text>

            <el-text @click="handleEdit(slotProps.scope)"> 编辑 </el-text>

            <el-text @click="handleEdit(slotProps.scope, true)"> 查看 </el-text>
          </template>
        </template>
      </tablecmt>

      <!-- 分页模块 -->
      <div class="flex-c-sb mt20">
        <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
        <!-- 分页模块 -->
        <el-pagination
          align="right"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.current"
          :page-sizes="[30, 50, 80, 120]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>

      <!-- 新增/编辑 -->
      <div>
        <el-dialog
          destroy-on-close
          :modal-append-to-body="false"
          :append-to-body="false"
          class="el-dialog-addTagVisited"
          width="80%"
          v-model="details.popUpShow.dialogVisible"
          :fullscreen="details.fullscreenObj.dialogVisible"
          :show-close="false"
          draggable
          overflow
        >
          <!-- 标题 -- 头部控件区 -->
          <template #header="{ close, titleId, titleClass }">
            <div class="my-header flex-c-sb" draggable>
              <div class="fwb" :id="titleId" :class="titleClass">{{ details.title }}</div>
              <div class="flex-c-c">
                <div @click="() => handleFullScrean('dialogVisible')" class="mr20">
                  <!-- 全屏显示按钮 -->
                  <el-button type="text" v-if="!details.fullscreenObj.dialogVisible">
                    <el-icon size="18px" class=""><FullScreen /></el-icon>
                  </el-button>
                  <el-button type="text" v-else>
                    <el-icon size="18px" class=""><CopyDocument /></el-icon>
                  </el-button>
                </div>

                <!-- 弹窗关闭按钮 -->
                <el-button type="text">
                  <el-icon size="18px" class="" @click="close"><Close /></el-icon>
                </el-button>
              </div>
            </div>
          </template>

          <div v-loading="details.loadingObj.addTagLoading">
            <el-form
              inline
              :disabled="details.isView"
              class="mt20 pl20"
              ref="formRef"
              :model="details.form"
            >
              <el-form-item
                v-for="item in details.formOptions"
                :label="item.label"
                label-width="160px"
                :class="item.type !== 5 ? 'w30' : 'w100'"
                :rules="item.rules"
                :prop="item.prop"
              >
                <!-- 普通输入框 -->
                <template v-if="item.type === 1">
                  <el-input
                    class="w100"
                    :placeholder="`请输入${item.label}`"
                    v-model="details.form[item.prop]"
                    clearable
                  ></el-input>
                </template>

                <!-- 数字输入框 -->
                <template v-else-if="item.type === 2">
                  <el-input-number
                    :controls="false"
                    v-model="details.form[item.prop]"
                    :placeholder="`请输入${item.label}`"
                    :min="item.min || 0"
                    :value-on-clear="0"
                    :precision="item.precision || 0"
                    class="w100"
                    :disabled="item.disabled || false"
                  ></el-input-number>
                </template>

                <!-- 下拉框 -->
                <template v-else-if="item.type === 3">
                  <el-select
                    v-model="details.form[item.prop]"
                    :placeholder="`请选择${item.label}`"
                    class="w100"
                    clearable
                    filterable
                    @change="value => item.change && item.change(value)"
                    :multiple="item.multiple || false"
                  >
                    <el-option
                      v-for="val in item.checkarr"
                      :key="val.value"
                      :label="val.label"
                      :value="val.value"
                    />
                  </el-select>
                </template>

                <!-- 时间选择 -->
                <template v-else-if="item.type === 4">
                  <el-date-picker
                    v-model="details.form[item.prop]"
                    type="date"
                    :placeholder="`请选择${item.label}`"
                    class="w100"
                    :default-value="new Date()"
                    :value-format="item.valueFormat || 'YYYY-MM-DD'"
                    clearable
                  />
                </template>

                <!-- 备注 -->
                <template v-else-if="item.type === 5">
                  <el-input
                    type="textarea"
                    v-model="details.form[item.prop]"
                    clearable
                    :placeholder="`请选择${item.label}`"
                    class="w100"
                  />
                </template>
              </el-form-item>

              <el-form-item label="道路运输许可证图片" class="w100">
                <div class="w100">
                  <el-upload
                    v-model:file-list="details.imgList"
                    list-type="picture"
                    :action="doubledCount"
                    :before-upload="beforeAvatarUpload"
                    :on-success="res => handleAvatarSuccess(res, 'img')"
                    :headers="headers"
                    multiple
                    :show-file-list="false"
                  >
                    <template #default>
                      <div class="pageTitle title mb20">
                        <el-button type="primary" icon="CirclePlus"> 添 加 </el-button>

                        <!-- <el-button icon="Delete" @click.stop="() => handleEmpty(item)"> 清 空 </el-button> -->
                      </div>
                    </template>
                  </el-upload>

                  <div class="imgRow">
                    <div v-for="(value, index) in details.imgList" :key="value.url">
                      <el-image
                        class="img"
                        :src="value.url"
                        v-loading="!value.imgUrl"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="details.imgList.map(val => val.imgUrl)"
                        :initial-index="index"
                        fit="cover"
                      />
                    </div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="合同附件">
                <div class="w100">
                  <el-upload
                    v-model:file-list="details.fileList"
                    :action="doubledCount"
                    multiple
                    :on-success="res => handleAvatarSuccess(res, 'file')"
                    :headers="headers"
                  >
                    <el-button icon="Upload" type="primary">上 传</el-button>
                  </el-upload>
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="flex-c-c dialog-footer" v-if="!details.isView">
            <el-button icon="Close" @click="details.popUpShow.addTagVisited = false">
              取 消
            </el-button>

            <!-- 提交 -->
            <el-button
              icon="Position"
              type="primary"
              :loading="details.loadingObj.addTagLoading"
              @click="handleSubmit"
            >
              提 交
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </basic-container>

  <!-- 列表配置显示 -->
  <edittablehead
    @closce="showdrawer"
    :drawerShow="drawerShow"
    v-model="details.columnList"
  ></edittablehead>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import functions from '@/utils/functions.js';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
import { getToken } from '@/utils/auth';
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import {
  downloadXls,
  setNodeHeight,
  getHtmls,
  deepClone,
  handleClearTableQuery,
  debounce,
  handleSelectQuery,
  handleInputQuery,
  handleTranslationDataSeclect,
  getObjType,
} from '@/utils/util';
import { columnList, formOptions } from '@/option/basicdata/basicdataCarrier2.js';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  postCarrierSubmit,
} from '@/api/basicdata/basicdataCarrier';
import { exportExcel } from '@/utils/exportData';

// 获取路由实例
const $router = useRouter();

const details = reactive<any>({
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  query: {},
  /** 时间快捷选择设置 */
  shortcuts: [
    {
      text: '最近一周',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ],
  /** 列表 */
  columnList: deepClone(columnList),
  /** 列表数据 */
  data: [],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    /** 页面loading */
    pageLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    current: 1,
    size: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 新增 | 编辑 | 查看 */
    dialogVisible: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  /** 全屏 */
  fullscreenObj: {
    /** 查看 */
    dialogVisible: false,
  },
  formOptions: deepClone(formOptions),
  imgList: [],
  fileList: [],
  /** 是否为查看 */
  isView: false,
  title: '新增',
});

const { search, query, shortcuts, data, loadingObj, selectionList, drawerShow, page } =
  toRefs(details);

/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));

onMounted(() => {
  const timer = setTimeout(() => {
    details.listNode = document.querySelector('.maboxhi');
    details.listNode.style.transition = 'all .5s ease-out';
    clearTimeout(timer);
  }, 100);
});

/** 请求页面数据 */
const onLoad = debounce(async (params = {}) => {
  try {
    details.loadingObj.list = true;
    let _page = details.page;
    const _submitData = { ..._page, ...details.query, ...params };
    delete _submitData.total;
    // 获取暂存单列表
    const res = await getList(_submitData);
    console.log('res :>> ', res);
    const { code, data } = res.data;
    if (code !== 200) return;
    details.data = data.records;

    handleTranslationDataSeclect(details.data, details.columnList);

    details.page.total = data.total;
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.list = false;
  }
}, 10);

const handleData = (key, res) => {
  const { code, data } = res.data;
  if (code !== 200) return;

  const _arr =
    getObjType(data) === 'array'
      ? data.map(val => {
          val.label = val.dictValue;
          val.value = val.dictKey;
          return val;
        })
      : [];

  for (let i = 0; i < details.columnList.length; i++) {
    const value = details.columnList[i];

    if (value.label !== key) continue;
    value.checkarr = _arr;
    break;
  }

  for (let i = 0; i < details.formOptions.length; i++) {
    const value = details.formOptions[i];

    if (value.label !== key) continue;
    value.checkarr = _arr;
    break;
  }
};

// 获取字典数据
const initData = async () => {
  await Promise.all([
    // 类型
    getDictionaryBiz('basic_carrier_type').then(res => handleData('类型', res)),

    onLoad(),
  ]);

  await nextTick();
  handleTranslationDataSeclect(details.data, details.columnList);
  console.log('details.columnList :>> ', details.columnList);
};

initData();

/** 搜索 */
const searchChange = () => {
  onLoad();
};

/** 清空表单 */
const searchReset = () => {
  details.query = {};
  details.page.current = 1;
  handleClearTableQuery(details.columnList);
  onLoad();
};

/** 展开列表控件 */
const showdrawer = (_flag?: boolean) => {
  details.drawerShow = _flag;
};

/** 是否开启搜索区 */
const searchHide = () => {
  details.search = !details.search;

  setNodeHeight(details.listNode, '', true);
};

/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
  handleInputQuery(index, row, details.query);
  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 selectsc = (index, row) => {
  handleSelectQuery(index, row, details.query);

  onLoad();
};

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

/** 每页数量改变执行的回调 */
const sizeChange = (size: number) => {
  details.page.size = size;
  onLoad();
};

/** 页码改变执行的回调 */
const currentChange = current => {
  details.page.current = current;
  onLoad();
};

/**
 * 是否开启全屏
 * @params(_type) 开启或关闭
 */
const handleFullScrean = (_name: string, _type: 'open' | 'close' = 'open') => {
  let _node: any = '';
  if (_name) _node = document.querySelector(`.${_name} .maboxhi`);

  switch (_name) {
    case 'packageOrderListlVisited':
      details.fullscreenObj.packageOrderListlVisited =
        !details.fullscreenObj.packageOrderListlVisited;

      if (_type === 'close') {
        if (_node) setNodeHeight(_node, '500px');
      } else {
        if (_node) setNodeHeight(_node, '800px');
      }
      break;

    default:
      details.fullscreenObj[_name] = !details.fullscreenObj[_name];
      break;
  }
};

/** 新增 */
const handleAdd = () => {
  details.isView = false;
  details.title = '新 增';

  const _form = {};

  // 初始化表单数据
  for (let i = 0; i < details.formOptions.length; i++) {
    const value = details.formOptions[i];

    _form[value.prop] = value.type === 2 ? 0 : '';
  }

  details.form = _form;
  details.imgList = [];
  details.fileList = [];

  // 开启弹窗
  details.popUpShow.dialogVisible = true;
};

/** 编辑 */
const handleEdit = ({ row }, isView = false) => {
  details.isView = isView;
  details.title = isView ? '查 看' : '编 辑';

  const _form = {};

  // 初始化表单数据
  for (let i = 0; i < details.formOptions.length; i++) {
    const value = details.formOptions[i];

    // _form[value.prop] = value.type === 2 ? 0 : '';
    _form[value.prop] = row[value.prop] || (value.type === 2 ? 0 : '');
  }

  details.form = _form;
  details.imgList =
    getObjType(row.roadTransportPhoto) === 'string'
      ? row.roadTransportPhoto.split(',').map(val => {
          return {
            url: val,
            imgUrl: val,
          };
        })
      : [];
  details.fileList =
    getObjType(row.contractAppendices) === 'string'
      ? row.contractAppendices.split(',').map(val => {
          return {
            url: val,
            fileUrl: val,
          };
        })
      : [];

  details.form.id = row.id;
  // 开启弹窗
  details.popUpShow.dialogVisible = true;
};

/** 删除
 * isBatch 是否批量删除
 * row 单个删除时当前行的数据
 */
const handleDelete = (isBatch, row: any = {}) => {
  let ids = '';

  if (isBatch) {
    if (!details.selectionList.length) {
      ElMessage.warning('请选择要删除的数据');
      return;
    }
    ids = details.selectionList.map(v => v.id).join(',');
  } else {
    ids = row.id;
  }

  ElMessageBox.confirm('确定删除该数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        details.loadingObj.pageLoading = true;

        const res = await remove(ids);
        const { code, msg } = res.data;
        if (code !== 200) return ElMessage.error(msg);
        ElMessage.success('删除成功');
        onLoad();
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        details.loadingObj.pageLoading = false;
      }
    })
    .catch(() => {});
};

// 图片上传接口
const doubledCount = computed(() => {
  return '/api/blade-resource/oss/endpoint/put-file';
});

// 上传图片规则
const beforeAvatarUpload = async rawFile => {
  console.log(rawFile);
  if (rawFile.type !== 'image/png' && rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片格式只能为 png/jpg!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能大于10MB!');
    return false;
  }
  const res = await compressImageBlob(rawFile);
  return res;
};

// 图片上传必须携带TOKEN
const headers = computed(() => {
  return { 'Blade-Auth': 'Bearer ' + getToken() };
});

// 上传成功
const handleAvatarSuccess = (response, type) => {
  switch (type) {
    // 图片
    case 'img':
      for (let i = 0; i < details.imgList.length; i++) {
        const value = details.imgList[i];
        console.log('value :>> ', value);
        value.imgUrl =
          value.response && value.response.code === 200
            ? value.response.data.link
            : value.imgUrl || '';
      }
      break;

    // 文件
    case 'file':
      for (let i = 0; i < details.fileList.length; i++) {
        const value = details.fileList[i];
        console.log('value :>> ', value);
        value.fileUrl =
          value.response && value.response.code === 200
            ? value.response.data.link
            : value.fileUrl || '';
      }
      break;

    default:
      break;
  }

  ElMessage.success('上传成功');
};

/** 确认清空 */
const handleEmpty = item => {
  if (item.imgList.length === 0) return ElMessage.warning('没有图片可以清空');

  ElMessageBox.confirm('确定要清空吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      item.imgList = [];
    })
    .catch(() => {});
};

/** 提交 */
const handleSubmit = async () => {
  try {
    details.loadingObj.pageLoading = true;

    const _imgArr = [];
    const _fileArr = [];

    for (let i = 0; i < details.imgList.length; i++) {
      const value = details.imgList[i];

      if (!value.imgUrl) return ElMessage.warning('存在异常或未上传完的图片, 请等待或移除');
      _imgArr.push(value.imgUrl);
    }

    for (let i = 0; i < details.fileList.length; i++) {
      const value = details.fileList[i];

      if (!value.fileUrl) return ElMessage.warning('存在异常或未上传完的文件, 请等待或移除');
      _fileArr.push(value.fileUrl);
    }

    const submitData = { ...details.form };
    // 附件
    submitData.contractAppendices = _fileArr.join(',');
    // 图片
    submitData.roadTransportPhoto = _imgArr.join(',');

    details.popUpShow.dialogVisible = false;
    const res = await postCarrierSubmit(submitData);

    const { code, msg } = res.data;
    if (code !== 200) return;
    msg && ElMessage.success(msg);
    onLoad();
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 导出表格数据 */
const handleExportData = () => {
  exportExcel(details.columnList, details.data, '承运商 - ' + new Date().getTime());
};
</script>

<style scoped lang="scss">
// 日期选择器
:deep(.el-date-editor.el-input) {
  height: 100% !important;
  width: 100% !important;
}

:deep(.el-range-editor.el-input__wrapper) {
  height: 100% !important;
}

.mt20 {
  margin-top: 20px;
}

.mr20 {
  margin-right: 20px;
}

.fwb {
  font-weight: bold;
}

// 弹窗
:deep(.el-overlay) {
  position: absolute;
}

:deep(.el-overlay-dialog) {
  position: absolute;
}

:deep(.el-form) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.w30 {
  width: 30%;
}

.w100 {
  width: 100% !important;
}

:deep(.el-input__inner) {
  text-align: left;
}

.imgRow {
  display: flex;
  flex-wrap: wrap;
  .img {
    margin: 10px;
    border-radius: 5px;
    width: 100px;
    height: 100px;
  }
}
</style>