logpm_page/src/views/basicdata/platform/PaymentPlatform.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" label-width="100px">
          <!-- 查询按钮 -->
          <el-form-item>
            <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 flex-c-sb">
        <!-- 头部左侧按钮模块 -->
        <div class="avue-crud__left">
          <el-button type="primary" icon="CirclePlus" @click="() => handleShowPop('add')">
            新 增
          </el-button>
        </div>
        <!-- 头部右侧按钮模块 -->
        <div class="avue-crud__right">
          <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
        ref="tableNodeRef"
        :columnList="details.columnList"
        :tableData="details.data"
        :loading="loadingObj.list"
        @inputTxt="inputsc"
        @timeCheck="timesc"
        @btnCheck="btnsc"
        @selectCheck="selectsc"
        @selection="selectionChange"
      >
        <template #default="{ scope: { row, column } }">
          <el-text @click="() => handleShowPop('edit', row)">编辑</el-text>
          <el-text @click="() => handleRemove(row)">移除</el-text>
        </template>
      </tablecmt>

      <!-- 分页模块 -->
      <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
        <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, 500]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </basic-container>

  <!-- 新增 && 编辑 -->
  <el-dialog
    v-model="details.popUpShow.addVisible"
    width="780px"
    :title="details.title"
    destroy-on-close
  >
    <el-form ref="formRef" :model="details.form" label-width="5rem">
      <el-form-item
        v-for="item in details.formOptions"
        :key="item.label"
        :label="item.label"
        :rules="item.rules || []"
        :prop="item.prop"
      >
        <template v-if="item.type === 'input'">
          <el-input
            v-model="details.form[item.prop]"
            :placeholder="`请输入${item.label}`"
            clearable
          />
        </template>

        <template v-else-if="item.type === 'number'">
          <el-input-number
            style="width: 100%"
            :controls="false"
            v-model="details.form[item.prop]"
            :placeholder="`请输入${item.label}`"
            :precision="item.precision"
            :min="item.min || 0"
            :max="item.max || Infinity"
          />
        </template>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button icon="CircleClose" @click="details.popUpShow.addVisible = false">取消</el-button>
        <el-button icon="Position" type="primary" @click="handleSubmit"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>

  <edittablehead
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="details.columnList"
    v-model="details.columnList"
  ></edittablehead>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick, defineAsyncComponent } from 'vue';
import functions from '@/utils/functions.js';
import dayjs from 'dayjs';
import { mapGetters, useStore } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { postFindBrandList } from '@/api/waybill/TemporaryStorageList';
import { postFindbusinessLine } from '@/api/reportforms/SalesDepartmentIncomeReport';
import { getList, postSave, postUpdate, postRemove } from '@/api/basicdata/PaymentPlatform';
import {
  setNodeHeight,
  getHtmls,
  deepClone,
  getObjType,
  handleTranslationDataSeclect,
  handleClearTableQuery,
  handleSelectQuery,
  handleInputQuery,
  downloadXls,
} from '@/utils/util';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { columnList } from '@/option/basicdata/PaymentPlatform';

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

// 组件实例
const tableNodeRef = ref();

const formRef = ref();

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: [],
  /** 头部搜索配置 */
  titleSearchOption: [],
  /** 流转节点数据 */
  flowNodeData: [],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    packageListLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    current: 1,
    size: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 新增弹窗 */
    addVisible: false,
  },
  /** 全屏 */
  fullscreenObj: {},
  /** 弹窗标题 */
  title: '新增' as '新增' | '编辑' | '查看',
  formOptions: [
    {
      label: '平台名称',
      prop: 'name',
      type: 'input',
      default: '',
      rules: [{ required: true, message: '请输入平台名称', trigger: ['blur', 'change'] }],
    },
    {
      label: '税点',
      prop: 'taxPoint',
      type: 'number',
      precision: 2,
      min: 0,
      max: 1,
      default: 0,
      rules: [{ required: true, message: '请输入税点', trigger: ['blur', 'change'] }],
    },
    {
      label: '收款名称',
      prop: 'accountName',
      type: 'input',
      default: '',
    },
    {
      label: '收款账号',
      prop: 'accountNumber',
      type: 'input',
      default: '',
    },
  ],
  submitType: 'add' as 'add' | 'edit',
  form: {},
});

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

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

/** 权限按钮 */
const permissionObj = reactive({});

/** 请求页面数据 */
const onLoad = async (params = {}) => {
  try {
    details.loadingObj.list = true;

    const submitData = { ...details.page, ...details.query, ...params };

    for (const key in submitData) {
      const element = submitData[key];

      if (!element && element !== 0) delete submitData[key];
    }

    delete submitData.total;

    const res = await getList(submitData);
    const { code, data } = res.data;
    if (code !== 200) return;
    details.data = getObjType(data.records) === 'array' ? data.records : [];
    details.page.total = data.total;

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

const init = () => {
  onLoad();
};

init();

/** 搜索 */
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(tableNodeRef.value.$el, '', 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 btnsc = () => {};

/** 表格表头下拉框选择 */
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();
};

/** 弹出层开启前清除数据 */
const beforeClose = done => {
  done();
  details.form = {};
  details.selectionList = [];
  details.view = false;
};

/** 开启弹窗 */
const handleShowPop = async (type, row: any = {}) => {
  const _form: any = {};

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

    _form[value.prop] = type !== 'add' ? row[value.prop] || value.default : value.default;
  }

  if (type === 'edit') _form.id = row.id;

  details.form = _form;
  details.submitType = type;
  details.popUpShow.addVisible = true;
};

/** 提交 */
const handleSubmit = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!');

      try {
        details.loadingObj.pageLoading = true;
        details.popUpShow.addVisible = false;

        const submitData = { ...details.form };

        const res =
          details.submitType === 'add' ? await postSave(submitData) : await postUpdate(submitData);

        const { code, msg } = res.data;

        if (code !== 200) return;

        ElMessage.success(msg);

        onLoad();
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        details.loadingObj.pageLoading = false;
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

/** 移除 */
const handleRemove = row => {
  ElMessageBox.confirm('确认移除', '提示', {
    type: 'warning',
  }).then(async () => {
    try {
      details.loadingObj.pageLoading = true;

      const res = await postRemove({ ids: row.id });

      const { code, msg } = res.data;

      if (code !== 200) return;

      ElMessage.success(msg);

      onLoad();
    } catch (error) {
      console.log('error :>> ', error);
    } finally {
      details.loadingObj.pageLoading = false;
    }
  });
};
</script>

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

:deep(.el-form-item__content) {
  height: fit-content;
}
.el_div_input {
  width: 100%;
  display: flex;
  align-items: center;
  .el_dy_icon {
    font-size: 1.5em;
  }
}

:deep(.el-input-number) {
  .el-input__inner {
    text-align: left;
  }
}
</style>