|
|
@@ -0,0 +1,325 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import {
|
|
|
+ ProjectFiling_Add,
|
|
|
+ ProjectFiling_Del,
|
|
|
+ ProjectFiling_Edit,
|
|
|
+ ProjectFiling_User_List
|
|
|
+} from '@/api/projectFiling/index'
|
|
|
+import {nextTick, reactive, ref} from 'vue'
|
|
|
+import Upload from '@/components/Upload/index.vue'
|
|
|
+import Drawer from '@/components/Drawer/index.vue'
|
|
|
+import TableBase from '@/components/TableBase/index.vue'
|
|
|
+import type {FormInstance, FormRules} from 'element-plus'
|
|
|
+import {ElMessage, ElMessageBox} from 'element-plus'
|
|
|
+import {Delete, Edit} from '@element-plus/icons-vue'
|
|
|
+import type {ColumnProps} from '@/components/TableBase/interface/index'
|
|
|
+import {useTablePublic} from '@/hooks/useTablePublic'
|
|
|
+
|
|
|
+const isNew = ref(true)
|
|
|
+const formLabelWidth = ref('120px')
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
+const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
|
|
|
+const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
|
|
|
+const uploadRef = ref<InstanceType<typeof Upload> | null>(null)
|
|
|
+const {resetForm, globalStore, searchOnTableList, updateOnTableList} = useTablePublic()
|
|
|
+
|
|
|
+const columns: ColumnProps[] = [
|
|
|
+ {type: 'index', label: '序号', width: 80},
|
|
|
+ {prop: 'T_date', label: '备案时间'},
|
|
|
+ {prop: 'T_sales_personnel', label: '销售人员'},
|
|
|
+ {prop: 'T_customers', label: '客户名称'},
|
|
|
+ {prop: 'T_customers_type', label: '客户类型'},
|
|
|
+ {prop: 'T_service_type', label: '服务类型'},
|
|
|
+ {prop: 'T_content', label: '具体内容'},
|
|
|
+ {prop: 'T_estimate_contract_amount', label: '预计合同金额'},
|
|
|
+ {prop: 'T_sign_bill_time', label: '预计签单时间'},
|
|
|
+ {prop: 'T_prepare_content', label: '提前准备内容'},
|
|
|
+ {prop: 'T_remark', label: '备注'},
|
|
|
+ {prop: 'operation', label: '操作', width: 150, fixed: 'right'}
|
|
|
+]
|
|
|
+
|
|
|
+const rules = reactive<FormRules>({
|
|
|
+ T_date: [{required: true, message: '请输入备案时间', trigger: 'blur'}],
|
|
|
+ T_sales_personnel: [{required: true, message: '请输入销售人员', trigger: 'blur'}],
|
|
|
+ T_customers: [{required: true, message: '请输入客户名称', trigger: 'blur'}],
|
|
|
+})
|
|
|
+const form: any = ref({
|
|
|
+ T_id: '',
|
|
|
+ T_date: '',
|
|
|
+ T_sales_personnel: '',
|
|
|
+ T_customers: '',
|
|
|
+ T_customers_type: '',
|
|
|
+ T_service_type: '',
|
|
|
+ T_content: '',
|
|
|
+ T_estimate_contract_amount: '',
|
|
|
+ T_sign_bill_time: '',
|
|
|
+ T_prepare_content: '',
|
|
|
+ T_remark: '',
|
|
|
+})
|
|
|
+
|
|
|
+const openDrawer = (type: string, row?: any) => {
|
|
|
+ isNew.value = type === 'new' ? true : false
|
|
|
+ if (type == 'edit') {
|
|
|
+ form.value.T_id = row.Id
|
|
|
+ form.value.T_date = row.T_date
|
|
|
+ form.value.T_sales_personnel = row.T_sales_personnel
|
|
|
+ form.value.T_customers = row.T_customers
|
|
|
+ form.value.T_customers_type = row.T_customers_type
|
|
|
+ form.value.T_service_type = row.T_service_type
|
|
|
+ form.value.T_content = row.T_content
|
|
|
+ form.value.T_estimate_contract_amount = row.T_estimate_contract_amount
|
|
|
+ form.value.T_sign_bill_time = row.T_sign_bill_time
|
|
|
+ form.value.T_prepare_content = row.T_prepare_content
|
|
|
+ form.value.T_remark = row.T_remark
|
|
|
+ } else {
|
|
|
+ delete form.value.T_id
|
|
|
+ form.value.T_date = ''
|
|
|
+ form.value.T_sales_personnel = ''
|
|
|
+ form.value.T_customers = ''
|
|
|
+ form.value.T_customers_type = ''
|
|
|
+ form.value.T_service_type = ''
|
|
|
+ form.value.T_content = ''
|
|
|
+ form.value.T_estimate_contract_amount = ''
|
|
|
+ form.value.T_sign_bill_time = ''
|
|
|
+ form.value.T_prepare_content = ''
|
|
|
+ form.value.T_remark = ''
|
|
|
+
|
|
|
+ }
|
|
|
+ drawerRef.value?.openDrawer()
|
|
|
+}
|
|
|
+
|
|
|
+const AddProduction = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ formEl.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ let res: any = {}
|
|
|
+ if (isNew.value) {//新增
|
|
|
+ res = await ProjectFiling_Add({User_tokey: globalStore.GET_User_tokey, ...form.value})
|
|
|
+ } else {//编辑
|
|
|
+ res = await ProjectFiling_Edit({
|
|
|
+ User_tokey: globalStore.GET_User_tokey,
|
|
|
+ ...form.value,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res.Code === 200) {
|
|
|
+ ElMessage.success(`项目备案${isNew.value ? '添加' : '修改'}成功！！`)
|
|
|
+ nextTick(() => {
|
|
|
+ drawerRef.value?.closeDrawer()
|
|
|
+ updateOnTableList(TableRef.value)
|
|
|
+ resetForm(ruleFormRef.value)
|
|
|
+ isNew.value = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const ProductDelete = (row: any) => {
|
|
|
+ ElMessageBox.confirm('您确定要删除该项目备案吗?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ const res: any = await ProjectFiling_Del({
|
|
|
+ User_tokey: globalStore.GET_User_tokey,
|
|
|
+ T_id: row.Id
|
|
|
+ })
|
|
|
+ if (res.Code === 200) {
|
|
|
+ ElMessage.success('删除成功！')
|
|
|
+ nextTick(() => updateOnTableList(TableRef.value))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ ElMessage.warning('取消成功！')
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const callbackDrawer = (done: () => void) => {
|
|
|
+ resetForm(ruleFormRef.value)
|
|
|
+ uploadRef.value?.clearfileList()
|
|
|
+ done()
|
|
|
+}
|
|
|
+// 搜索
|
|
|
+const initParam = reactive({
|
|
|
+ User_tokey: globalStore.GET_User_tokey,
|
|
|
+ T_sales_personnel: '',
|
|
|
+ T_customers: ''
|
|
|
+})
|
|
|
+
|
|
|
+const options = ref<any[]>([
|
|
|
+ {
|
|
|
+ value: '医药公司',
|
|
|
+ label: '医药公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '连锁药店',
|
|
|
+ label: '连锁药店',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '疾控中心',
|
|
|
+ label: '疾控中心',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '医院',
|
|
|
+ label: '医院',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '药厂',
|
|
|
+ label: '药厂',
|
|
|
+ },
|
|
|
+])
|
|
|
+const options2 = ref<any[]>([
|
|
|
+ {
|
|
|
+ value: '传统业务',
|
|
|
+ label: '传统业务',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '创新业务',
|
|
|
+ label: '创新业务',
|
|
|
+ }
|
|
|
+])
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="production-list">
|
|
|
+ <TableBase ref="TableRef" :columns="columns" :requestApi="ProjectFiling_User_List" :initParam="initParam">
|
|
|
+ <template #table-header>
|
|
|
+ <div class="input-suffix">
|
|
|
+ <el-row :gutter="20" style="margin-bottom: 0">
|
|
|
+ <el-col :xl="6" :lg="8" :md="10">
|
|
|
+ <span class="inline-flex items-center">销售人员：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="initParam.T_sales_personnel"
|
|
|
+ type="text"
|
|
|
+ class="w-50 m-2"
|
|
|
+ placeholder="按销售人员搜索"
|
|
|
+ @change="searchOnTableList(TableRef)"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="6" :lg="8" :md="10">
|
|
|
+ <span class="inline-flex items-center">客户名称：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="initParam.T_customers"
|
|
|
+ type="text"
|
|
|
+ class="w-50 m-2"
|
|
|
+ placeholder="按客户名称搜索"
|
|
|
+ @change="searchOnTableList(TableRef)"
|
|
|
+ />
|
|
|
+ <el-button type="primary" @click="searchOnTableList(TableRef)">搜索</el-button>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="6" :md="2" class="btn"
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="openDrawer('new')">添加</el-button>
|
|
|
+ </el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #right="{ row }">
|
|
|
+ <el-button link type="primary" size="small" :icon="Edit" @click="openDrawer('edit', row)">编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button link type="danger" size="small" :icon="Delete" @click="ProductDelete(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </TableBase>
|
|
|
+ <Drawer ref="drawerRef" :handleClose="callbackDrawer">
|
|
|
+ <template #header="{ params }">
|
|
|
+ <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 项目备案</h4>
|
|
|
+ </template>
|
|
|
+ <el-form ref="ruleFormRef" :model="form" :rules="rules">
|
|
|
+
|
|
|
+ <el-form-item label="备案时间：" :label-width="formLabelWidth" prop="T_date">
|
|
|
+ <el-date-picker
|
|
|
+ style="flex: 0 0 60%"
|
|
|
+ class="my-date-picker"
|
|
|
+ v-model="form.T_date"
|
|
|
+ type="date"
|
|
|
+ placeholder="备案时间"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="销售人员：" :label-width="formLabelWidth" prop="T_sales_personnel">
|
|
|
+ <el-input class="w-50" v-model="form.T_sales_personnel" type="text" autocomplete="off"
|
|
|
+ placeholder="请填写销售人员"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户名称：" :label-width="formLabelWidth" prop="T_customers">
|
|
|
+ <el-input class="w-50" v-model="form.T_customers" type="text" autocomplete="off"
|
|
|
+ placeholder="请填写客户名称"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户类型：" :label-width="formLabelWidth" prop="T_customers_type">
|
|
|
+ <el-select class="w-50" v-model="form.T_customers_type" clearable filterable allow-create :reserve-keyword="false" placeholder="请填写客户类型">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="服务类型：" :label-width="formLabelWidth" prop="T_service_type">
|
|
|
+ <el-select class="w-50" v-model="form.T_service_type" clearable filterable allow-create :reserve-keyword="false" placeholder="请填写服务类型">
|
|
|
+ <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="具体内容：" :label-width="formLabelWidth" prop="T_content">
|
|
|
+ <el-input class="w-50" v-model="form.T_content" type="text" autocomplete="off"
|
|
|
+ placeholder="请填写具体内容"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="预计合同金额：" :label-width="formLabelWidth"
|
|
|
+ prop="T_estimate_contract_amount">
|
|
|
+ <el-input class="w-50" v-model="form.T_estimate_contract_amount" type="text" autocomplete="off"
|
|
|
+ placeholder="请填写预计合同金额"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="预计签单时间：" :label-width="formLabelWidth" prop="T_sign_bill_time">
|
|
|
+ <el-input class="w-50" v-model="form.T_sign_bill_time" type="text" autocomplete="off"
|
|
|
+ placeholder="请填写预计签单时间"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="提前准备内容：" :label-width="formLabelWidth"
|
|
|
+ prop="T_prepare_content">
|
|
|
+ <el-input class="w-50" v-model="form.T_prepare_content" type="text" autocomplete="off"
|
|
|
+ placeholder="请填写提前准备内容"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
|
|
|
+ <el-input class="w-50" v-model="form.T_remark" type="text" autocomplete="off"
|
|
|
+ placeholder="请填写备注"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item :label-width="formLabelWidth">
|
|
|
+ <el-button v-if="isNew" color="#626aef" @click="AddProduction(ruleFormRef)">提交</el-button>
|
|
|
+ <el-button v-else color="#626aef" @click="AddProduction(ruleFormRef)">修改</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </Drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@import '@/styles/var.scss';
|
|
|
+
|
|
|
+.tooltip-content {
|
|
|
+ max-width: 500px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.production-list {
|
|
|
+ @include f-direction;
|
|
|
+
|
|
|
+ .input-suffix {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .inline-flex {
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w-50 {
|
|
|
+ width: 12.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .w-50 {
|
|
|
+ flex: 0 0 60%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zoie