manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/contacts/index.vue

<template>
  <div class="h-full flex">
    <div class="p-5 w-80 pr-0">
      <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col">
        <div class="flex-1 p-3 overflow-y-auto">
          <!-- 筛选条件 -->
          <el-form :model="filterForm" label-width="70px" style="max-width: 600px">
            <el-form-item v-for="(item, index) in filterItems" :key="index" :label="item.label">
              <el-input v-if="item.type === 'input'" v-model="filterForm[item.key as keyof FilterForm]" clearable placeholder="请输入"></el-input>
              <el-select v-else v-model="filterForm[item.key as keyof FilterForm]" placeholder="请选择" clearable>
                <el-option v-for="option in item.options" :key="option.id" :label="option.name" :value="option.id" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="flex-1 p-5 overflow-auto">
      <div class="bg-white w-full h-full p-3 shadow-md rounded-md flex flex-col">
        <div class="flex justify-end pb-3">
          <!-- 操作按钮 -->
          <el-button v-for="(button, index) in actionButtons" :key="index" type="primary">{{ button.text }}</el-button>
        </div>
        <div class="flex-1 w-full overflow-hidden">
          <!-- 表格 -->
          <el-table ref="clueTableRef" :data="formTable" border v-loading="allLoading.formTableLading"
            style="width: 100%;height: 100%;">
            <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.prop" :label="column.label" :width="column.width">
              <template #default="scope">
                <template v-if="column.event === 'toDetali'">
                  <el-button link type="primary" size="large" @click="toDetali(scope.row)">{{ scope.row.name }}</el-button>
                </template>
              </template>
            </el-table-column>
            <el-table-column :label="'操作'" :width="'200px'" fixed="right">
              <template #default="scope">
                <el-button link type="primary" size="large">编辑</el-button>
                <el-button link type="primary" size="large">新建任务</el-button>
                <el-button link type="danger" size="large">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end pt-3">
          <!-- 分页 -->
          <el-pagination layout="total, prev, pager, next, sizes" :total="formTablePaging.total"
            :hide-on-single-page="true" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from "vue";
import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, getLastDayOfMonth, formatDate } from '@/utils/tools'
import { post, get } from "@/utils/request";
import { actionButtons, tableColumns, GETSYSFILED, GETPERSONNEL, GETGENERATEFOEM, MOD } from "./api";
import { useRouter, useRoute } from "vue-router";

const router = useRouter()

const filterForm = reactive<FilterForm>({ // 筛选条件
  contactPerson: "",
  customerId: "",
  phoneNumber: '',
  responsibleId: '',
  createId: '',
  email: '',
});
const selectData = reactive({ // 下拉数据
  Personnel: [] as personnelInterface[],
  Customer: [] as any[],
})
const filterItems = ref<FilterItem[]>([
    { label: '联系人', key: 'contactPerson', type: 'input' },
    { label: '客户名称', key: 'customerId', type: 'select', options: selectData.Customer },
    { label: '电话号码', key: 'phoneNumber', type: 'input' },
    { label: '邮箱', key: 'email', type: 'input' },
    { label: '负责人', key: 'responsibleId', type: 'select', options: selectData.Personnel },
    { label: '创建人', key: 'createId', type: 'select', options: selectData.Personnel },
])
const formTablePaging = reactive({ // 分页条件
  currentPage: 1,
  pageSize: 10,
  total: 0,
})
const generateFormData = ref([]) // 自定义表单数据

const formTable = ref([
  {name: '联系人', mobile: '13311112222', email: '123@qq.com', responsible: '张三', createId: '张三'}
]) // 表格数据
const allLoading = reactive({ // 按钮加载 Loading
  formTableLading: false,
})
const dialogVisible = reactive({

})

function toDetali(row: any) {
  router.push({
    path: `${MOD}/detail`,
    query: { id: row.name }
  })
}

async function getSystemField() {
  const systemField = getAllListByCode([])
  for (let i in systemField) {
    const { data } = await get(`${GETSYSFILED}?code=${systemField[i]}`)
    for (let key of Object.keys(selectData)) {
      if (systemField[i] == key) {
        Object.assign(selectData, { [key]: data })
      }
    }
  }

  const { data } = await post(GETPERSONNEL, {})
  selectData.Personnel = data.map((item: any) => {
    const { id, name, phone, jobNumber } = item
    return {
      id, name, phone, jobNumber
    }
  })

  // const res = await get(GETGENERATEFOEM)
  // generateFormData.value = JSON.parse(res.data[0].config)

  setFilterItems()
}

function setFilterItems() {
  console.log(selectData)
  filterItems.value = [
    { label: '联系人', key: 'contactPerson', type: 'input' },
    { label: '客户名称', key: 'customerId', type: 'select', options: selectData.Customer },
    { label: '电话号码', key: 'phoneNumber', type: 'input' },
    { label: '邮箱', key: 'email', type: 'input' },
    { label: '负责人', key: 'responsibleId', type: 'select', options: selectData.Personnel },
    { label: '创建人', key: 'createId', type: 'select', options: selectData.Personnel },
  ]
}

onMounted(() => {
  getSystemField()
})
</script>

<style lang="scss" scoped></style>