new_crm_front/src/views/order/orderLoan/index.vue

<template>
  <div>
    <PlusPage
      ref="plusPageInstance"
      :columns="tableConfig"
      :request="getList"
      :is-card="true"
      :beforeSearchSubmit="handleBeforeSearch"
      :search="{
        labelWidth: 100,
        showNumber: 3
      }"
      :table="{
        actionBar: { buttons, type: 'link', width: 180 },
        adaptive: { offsetBottom: 50 },
        isSelection: true,
        rowKey: 'id',
        onSelectionChange: handleSelectionChange
      }"
      :pageInfoMap="{ page: 'pageNum', pageSize: 'pageSize' }"
    >
      <template #table-title>
        <el-row class="button-row">
          <el-button type="danger" @click="handleReliveOrder">
            解除分配
          </el-button>
          <el-button type="primary" @click="handleReset"> 重新分配 </el-button>
        </el-row>
      </template>
    </PlusPage>
    <!-- 跟进弹窗编辑 -->
    <PlusDialogForm
      ref="dialogForm"
      v-model="form"
      v-model:visible="dialogVisible"
      :form="{
        columns,
        labelPosition: 'left',
        labelWidth: 100,
        rules
      }"
      :dialog="{ title: '跟进', width: 600, confirmLoading }"
      @confirm="handleSubmit"
      @close="handleClose"
    />
    <!-- 跟进状态弹窗 -->
    <plusDialog
      v-model="detailsVisible"
      :hasFooter="false"
      title="跟进记录"
      width="600"
    >
      <plus-descriptions
        :column="4"
        :data="detailForm"
        :columns="detailsColumns"
        :border="false"
      />
      <el-card>
        <el-timeline v-if="detailForm.list.length !== 0">
          <el-timeline-item
            v-for="item in detailForm.list"
            :key="item.id"
            :timestamp="item.createTime"
          >
            <el-card>
              <el-row>
                <el-col :span="8">
                  <el-rate v-model="item.starLevel" disabled />
                </el-col>
                <el-col :span="16">
                  <el-tag>{{ item.remark }}</el-tag>
                </el-col>
              </el-row>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <span v-else class="text-center flex justify-center">暂无数据</span>
      </el-card>
    </plusDialog>
    <!-- 重新分配弹窗 -->
    <PlusDialogForm
      ref="resetFormDialog"
      v-model="resetForm"
      v-model:visible="resetVisible"
      :form="{
        columns: resetColumns,
        labelWidth: 100,
        rules: resetRules
      }"
      title="重新分配"
      :dialog="{
        width: 400,
        confirmLoading
      }"
      @confirm="handleResetAccount"
      @close="handleClose"
    />
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  onMounted,
  reactive,
  ref,
  resolveDirective,
  toRefs
} from "vue";
import type { FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  type FieldValues,
  type PlusColumn,
  PlusDescriptions,
  PlusDialog,
  PlusDialogForm,
  PlusPage,
  PlusPageInstance,
  useTable
} from "plus-pro-components";
import { useRouter } from "vue-router";
import {
  getMerchantOrderInfoAllList,
  merchantFollowInfoAllocationAccount,
  merchantFollowInfoList,
  merchantFollowInfoOrderVisible,
  merchantFollowInfoReliveOrder,
  updateStartLevel
} from "@/api/order";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { cloneDeep, isString } from "@pureadmin/utils";
import { getChildAccount } from "@/api/childAccount";
import { getDictionary } from "@/utils/dictionary";
import { AesEncode } from "@/utils/crypto";

defineOptions({
  name: "OrderLoan"
});

const router = useRouter();

const plusPageInstance = ref<PlusPageInstance | null>(null);

const getList = async (query: Record<string, any>) => {
  let res = await getMerchantOrderInfoAllList(query);
  return {
    data: res.data.list,
    total: res.data.total
  };
};

onMounted(() => {
  getChildAccountList();
});

// 搜索条件处理
const handleBeforeSearch = (values: any) => {
  let params = cloneDeep(values);
  if (params.applyTime && params.applyTime.length === 2) {
    Reflect.set(params, "beginTime", values.applyTime[0]);
    Reflect.set(params, "endTime", values.applyTime[1]);
  } else {
    Reflect.deleteProperty(params, "beginTime");
    Reflect.deleteProperty(params, "endTime");
  }
  return params;
};

// 重新请求列表接口
const refresh = () => {
  plusPageInstance.value?.getList();
};

const dialogTitle = computed(() => (state.isCreate ? "新增" : "编辑"));

const multipleSelection = ref([]);

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};

const handleReliveOrder = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请选择要解除分配的订单");
    return;
  }
  ElMessageBox.confirm("确认解除分配？", "提示").then(async () => {
    try {
      let res = await merchantFollowInfoReliveOrder({
        orderIds: multipleSelection.value.map((item: any) => item.id)
      });
      if (res.code === 0) {
        ElMessage.success("解除分配成功");
        refresh();
      }
    } catch (e) {
      ElMessage.error("删除失败");
    }
  });
};

const childAccountList = ref<any[]>([]);

const getChildAccountList = async () => {
  let res = await getChildAccount();
  childAccountList.value = res.data;
};

// 表格数据
const tableConfig: PlusColumn[] = [
  {
    label: "订单号",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    width: 150,
    prop: "orderNo"
  },
  {
    label: "客户姓名",
    prop: "userName"
  },
  {
    label: "性别",
    prop: "userSex",
    width: 60,
    hideInSearch: true
  },
  {
    label: "客户星级",
    prop: "star",
    valueType: "rate",
    editable: true,
    width: 140,
    fieldProps: {
      disabled: true
    },
    hideInSearch: true
  },
  {
    label: "客户星级",
    prop: "star",
    valueType: "select",
    options: [
      { label: "1星", value: 1 },
      { label: "2星", value: 2 },
      { label: "3星", value: 3 },
      { label: "4星", value: 4 },
      { label: "5星", value: 5 }
    ],
    hideInTable: true
  },
  {
    label: "电话",
    prop: "maskPhone",
    width: 100,
    hideInSearch: true
  },
  {
    label: "电话",
    prop: "userMobile",
    hideInTable: true
  },
  {
    label: "微信",
    prop: "wxCode",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    hideInSearch: true
  },
  {
    label: "优先联系方式",
    prop: "headContractType",
    hideInSearch: true
  },
  {
    label: "申请产品",
    prop: "productName",
    hideInSearch: true
  },
  {
    label: "需求资金",
    prop: "loanAmount",
    hideInSearch: true
  },
  {
    label: "贷款期限",
    prop: "loanTerm",
    hideInSearch: true,
    formatter: val => getDictionary("LoanLimit", val)
  },
  {
    label: "申请时间",
    prop: "applyTime",
    width: 170,
    valueType: "date-picker",
    fieldProps: {
      type: "datetimerange",
      rangeSeparator: "-",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    }
  },
  {
    label: "分配子账号",
    prop: "followerId",
    valueType: "select",
    options: computed(() => childAccountList.value),
    optionsMap: {
      label: "contractName",
      value: "id"
    },
    hideInTable: true
  },
  {
    label: "分配子账号",
    prop: "follower",
    hideInSearch: true
  },
  {
    label: "状态",
    prop: "orderStatus",
    valueType: "select",
    options: [
      { label: "待分配", value: 1 },
      { label: "已分配", value: 2 }
    ]
  },
  {
    label: "备注",
    prop: "remark",
    hideInSearch: true
  }
];

/*--------------------表单--------------------*/

// 表单实例
const dialogForm = ref(null);

interface State {
  dialogVisible: boolean;
  detailsVisible: boolean;
  resetVisible: boolean;
  confirmLoading: boolean;
  selectedIds: number[];
  isCreate: boolean;
  form: {};
  detailForm: {
    list: any;
  };
  resetForm: {};
  rules: FormRules;
  resetRules: FormRules;
}

const state = reactive<State>({
  dialogVisible: false,
  detailsVisible: false,
  resetVisible: false,
  confirmLoading: false,
  selectedIds: [],
  isCreate: false,
  form: {},
  detailForm: {
    list: []
  },
  resetForm: {},
  rules: {
    starLevel: [
      { required: true, message: "请选择客户星级", trigger: "change" }
    ]
  },
  resetRules: {
    accountId: [
      { required: true, message: "请选择分配子账号", trigger: "change" }
    ]
  }
});

const columns: PlusColumn[] = [
  {
    label: "客户星级",
    prop: "starLevel",
    valueType: "select",
    tooltip: {
      content:
        "<span>客户星级说明</span></br>" +
        "<span>0星：未接通</span></br>" +
        "<span>1星：接通但无办理意向</span></br>" +
        "<span>2星：有意向但无可贷点</span></br>" +
        "<span>3星：有可贷点但资质一般</span></br>" +
        "<span>4星：有可贷点且条件较好</span></br>" +
        "<span>5星：马上需要或条件优质</span></br>",
      rawContent: true
    },
    options: [
      { label: "1星", value: 1 },
      { label: "2星", value: 2 },
      { label: "3星", value: 3 },
      { label: "4星", value: 4 },
      { label: "5星", value: 5 }
    ]
  },
  {
    label: "备注",
    prop: "remark",
    valueType: "input",
    fieldProps: {
      type: "textarea",
      rows: 4,
      maxlength: 200,
      showWordLimit: true
    }
  }
];

const detailsColumns: PlusColumn[] = [
  {
    label: "姓名：",
    prop: "userName"
  },
  {
    label: "需求资金：",
    prop: "loanAmount"
  },
  {
    label: "年龄：",
    prop: "age"
  },
  {
    label: "需求周期：",
    prop: "loanTerm"
  }
];

const resetColumns: PlusColumn[] = [
  {
    label: "分配子账号",
    prop: "accountId",
    valueType: "select",
    options: computed(() => childAccountList.value),
    optionsMap: {
      label: "contractName",
      value: "id"
    }
  }
];

const handleSubmit = async (values: FieldValues) => {
  confirmLoading.value = true;
  try {
    let params = form.value;
    console.log(params);
    let res = await updateStartLevel(params);
    if (res.code === 0) {
      ElMessage.success("修改成功");
      confirmLoading.value = false;
      dialogVisible.value = false;
      refresh();
    } else {
      ElMessage.error(res.msg);
    }
  } finally {
    confirmLoading.value = false;
  }
};

const handleResetAccount = async (values: FieldValues) => {
  confirmLoading.value = true;
  try {
    let params = resetForm.value;
    console.log(params);
    let res = await merchantFollowInfoAllocationAccount(params);
    if (res.code === 0) {
      ElMessage.success("重新分配成功");
      resetVisible.value = false;
      refresh();
    } else {
      ElMessage.error(res.msg);
    }
  } catch (e) {
    ElMessage.error("重新分配失败");
  } finally {
    confirmLoading.value = false;
  }
};

const handleClose = () => {
  // 重置表单校验状态
  console.log(dialogForm.value.formInstance);
  dialogForm.value.formInstance.resetFields();
};

const { buttons } = useTable();

const perms = resolveDirective("perms");

const handleReset = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请选择要重新分配的订单");
    return;
  }
  resetForm.value = {};
  resetForm.value.id = multipleSelection.value.map((item: any) => item.id);
  console.log(resetForm.value);
  resetVisible.value = true;
};

buttons.value = [
  {
    // 修改
    text: "详情",
    code: "edit",
    // props v0.1.16 版本新增函数类型
    props: {
      type: "primary"
    },
    onClick(val) {
      let visibleParams = {
        id: AesEncode(val.row.id)
      };
      merchantFollowInfoOrderVisible(visibleParams).then(res => {
        if (res.code === 0 && res.data.visible === true) {
          let params = {
            id: val.row.id,
            orderNo: val.row.orderNo
          };
          Object.keys(params).forEach(param => {
            if (!isString(params[param])) {
              params[param] = params[param].toString();
            }
          });
          // 保存信息到标签页
          useMultiTagsStoreHook().handleTags("push", {
            path: `/order/order-loan/detail`,
            name: "OrderLoanDetail",
            query: params,
            meta: {
              title: `订单详情`,
              // 如果使用的是非国际化精简版title可以像下面这么写
              // title: `No.${index} - 详情信息`,
              // 最大打开标签数
              dynamicLevel: 1
            }
          });
          // 路由跳转
          router.push({ name: "OrderLoanDetail", query: params });
        } else {
          ElMessage.error(res.data.msg);
          return;
        }
      });
    }
  },
  {
    // 跟进
    text: "跟进",
    props: {
      type: "primary"
    },
    onClick(val) {
      form.value = {};
      form.value.orderId = val.row.orderNo;
      dialogVisible.value = true;
    }
  },
  {
    // 修改
    text: "跟进记录",
    props: {
      type: "primary"
    },
    onClick(val: any) {
      console.log(val.row);
      detailForm.value = val.row;
      detailForm.value.list = [];
      merchantFollowInfoList({ orderNo: val.row.orderNo }).then(res => {
        detailForm.value.list = res.data;
      });
      detailsVisible.value = true;
    }
  }
];

const {
  form,
  detailForm,
  resetForm,
  confirmLoading,
  rules,
  resetRules,
  dialogVisible,
  detailsVisible,
  resetVisible
} = toRefs(state);
</script>