crm_front_v3/src/views/custom_manage/officalTrial/trialApplication.vue

<script setup>
import { ref,computed } from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { customInterence } from "@/api/api.js";
import mPage from '@/components/mPage.vue'


const isShowloadding = ref(false)
const tableData =   ref([]) //表格数据
const page_no =  ref(1)
const pageSize =  ref(10)
const total =  ref(0)
const lang = ref("中文官网")
const search_txt = ref("") // 搜索关键字
/* 获取表格数据 */
function getTableData() {
  isShowloadding.value = true;
  customInterence
    .trialList({
      PageSize: 10,
      CurrentIndex: page_no.value,
      SourceType: lang.value,
      KeyWord: search_txt.value,
    })
    .then((res) => {
      if (res.Ret === 200) {
        total.value = res.Data.Paging.Totals;
      
        tableData.value = res.Data.List;
      } else {
        tableData.value = [];
      }
      isShowloadding.value = false;
    })
}
getTableData()


/* 页码改变 */
function  handleCurrentChange(page) {
  page_no.value = page;
  getTableData();
}


/* 点击"未处理" */
function statusHandle(item) {
  ElMessageBox.confirm("请确认已处理客户申请？", "提示", {
  type: "warning",
  })
  .then(() => {
    customInterence
      .trialStatus({
      Id: item.Id,
      })
      .then((res) => {
      
      if (res.Ret === 200) {
        ElMessage.success("操作成功！");
        getTableData();
      }
      });
  })
  .catch(() => {});
}

/* 中英文按钮 */
function cEnClick(txt) {
  search_txt.value = "";
  lang.value = txt;

  page_no.value = 1;
  getTableData();
}

const cnColumn = [
  { label: '企业名称',key: 'CompanyName' },
  { label: '姓名',key: 'RealName' },
  { label: '手机号/邮箱',key: 'Phone' },
  { label: '所属行业',key: 'Industry' },
  { label: '申请时间',key: 'CreateTimeStr' },
  { label: '申请品种',key: 'ProductInfo' },
]
const enColumn = [
  { label: '企业名称',key: 'CompanyName' },
  { label: '姓名',key: 'RealName' },
  { label: '邮箱',key: 'Email' },
  { label: '信息',key: 'Message' },
  { label: '发送时间',key: 'CreateTimeStr' },
]
const columns = computed(() => {
  return lang.value==='中文官网' ? cnColumn : enColumn
})

</script>
<template>
  <div class="trialApplication_container">
		<div class="trialApplication_top">
			<div class="left">
				<el-button type="primary" ref="btnCn" :plain="lang!=='中文官网'" @click="cEnClick('中文官网')">中文网站</el-button>
				<el-button type="primary" ref="btnEn" :plain="lang!=='英文官网'" @click="cEnClick('英文官网')"
					>英文网站</el-button
				>
			</div>
			<div class="right">
        <el-input
          placeholder="公司名称/手机号码"
          v-model="search_txt"
          clearable
          style="max-width: 500px"
          ref="searchInput"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
			  <el-button @click="getTableData" type="primary">客户检索</el-button>
			</div>
		</div>
		<div class="trialApplication_cont">
			<!-- 中文官网 -->
			<el-table
			ref="table"
			:data="tableData"
			v-loading="isShowloadding"
			element-loading-text="数据加载中..."
			border
			>
			<el-table-column
				:label="item.label"
				align="center"
        v-for="item in columns"
        :key="item.key"
			>
				<template #default="scope">
          <span v-if="key==='Phone'">{{scope.row[item.key] || scope.row.Email}}</span>
          
					<span v-else>{{ scope.row[item.key] }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<div style="color: #4099ef; font-size: 24px">
					<span
						v-if="scope.row.Status == '待处理'"
						class="processed editsty"
						@click.stop="statusHandle(scope.row)"
						>标记处理 
					</span>
					</div>
				</template>
			</el-table-column>
      <template #empty>
        <div style="line-height: 44px; margin: 60px 0; color: #999">
          <img
            src="~@/assets/img/cus_m/nodata.png"
            alt=""
            style="display: block; width: 160px; height: 128px; margin: auto"
          />
          <span>暂无信息</span>
        </div>
      </template>
    </el-table>

			<el-col :span="24" class="toolbar">
         <mPage
          :total="total"
          :page_no="page_no"
          :pageSize="pageSize"
          @handleCurrentChange="handleCurrentChange"
        />
			</el-col>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.trialApplication_container {
  .el-form-item__label {
    font-size: 16px;
    padding-right: 20px !important;
  }
  .trialApplication_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #ececec;
    padding: 20px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    .left {
      width: 215px;
    }
    .right {
      width: 617px;
    }
    a {
      float: left;
    }
    a:last-of-type {
      float: right;
      margin-left: 19px;
    }
  }
  .trialApplication_cont {
    padding: 20px 30px 80px;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid #ececec;
    border-radius: 4px;
  }
  /* 待处理hover效果 */
  .el-table__row td:last-of-type .cell div span {
    cursor: pointer;
  }
}
</style>