| | |
| | | <template> |
| | | <div class="service-contract"> |
| | | <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" /> |
| | | <div class="btn-pager"> |
| | | <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" /> |
| | | <PagerView class="page" /> |
| | | <div v-if="isDetail" class="detail-top"> |
| | | <DetailListCommonBtn :query-class-options="queryClassOptions" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | </div> |
| | | <TableCommonView ref="tableListRef" :table-list="tableList"> |
| | | <div v-else class="top"> |
| | | <SearchCommonView |
| | | ref="searchCommonView" |
| | | :query-class-options="queryClassOptions" |
| | | :search-options="searchOptions" |
| | | :search-sel="searchSel" |
| | | @searchClick="searchClick" |
| | | @resetClick="resetClick" |
| | | /> |
| | | <div class="btn-pager"> |
| | | <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" @batchDelete="delClick" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | </div> |
| | | </div> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | :table-list="tableList" |
| | | :select-box="!isDetail" |
| | | @selClientClick="selClientClick" |
| | | @selCommonClick="selCommonClick" |
| | | @getSelectArray="getSelectArray" |
| | | > |
| | | <template slot="tableButton"> |
| | | <el-table-column label="操作" width="60"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> |
| | | <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> --> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | </TableCommonView> |
| | | <!-- 新建/编辑 --> |
| | | <AddServiceContractDialog v-if="editConfig.visible" :edit-common-config="editConfig" /> |
| | | <!-- 服务合同明细 --> |
| | | <DetailServiceContract v-if="serviceContractDetail.visible" :service-contract-detail="serviceContractDetail" /> |
| | | <!-- 客户详情 --> |
| | | <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import SearchCommonView from "@/components/makepager/SearchCommonView" |
| | | import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView" |
| | | import PagerView from "@/components/makepager/PagerView" |
| | | import TableCommonView from "@/components/makepager/TableCommonView" |
| | | import AddServiceContractDialog from "@/views/service/serviceContract/AddServiceContractDialog" |
| | | import { getServiceContractList, getDelServiceContract } from "@/api/serviceManage/serviceContract" |
| | | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" |
| | | import DetailServiceContract from "@/views/service/serviceContract/DetailServiceContract" |
| | | |
| | | export default { |
| | | name: "ServiceContract", |
| | | props: {}, |
| | | props: { |
| | | isDetail: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }, |
| | | mixins: [pageMixin], |
| | | components: { |
| | | SearchCommonView, |
| | | PublicFunctionBtnView, |
| | | PagerView, |
| | | TableCommonView, |
| | | AddServiceContractDialog |
| | | AddServiceContractDialog, |
| | | DetailServiceContract, |
| | | DetailClientManage: () => import("@/views/client/client/DetailClientManage") |
| | | }, |
| | | computed: { |
| | | searchCommonHeight() { |
| | |
| | | visible: false, |
| | | title: "新建", |
| | | infomation: {} |
| | | } |
| | | }, |
| | | serviceContractDetail: { |
| | | visible: false, |
| | | infomation: {} |
| | | }, |
| | | clientDeail: { |
| | | visible: false, |
| | | infomation: {} |
| | | }, |
| | | searchSel: { |
| | | value: "number", |
| | | label: "服务合同编号" |
| | | }, |
| | | selValueList: [] |
| | | } |
| | | }, |
| | | created() { |
| | | this.setTable() |
| | | this.getData() |
| | | }, |
| | | methods: { |
| | | setTable() { |
| | | this.tableList = { |
| | | tableInfomation: [ |
| | | { |
| | | serviceContractNumber: "FWHT20230703123", |
| | | customName: "上海铃铛信息科技有限公司", |
| | | signDate: "2023-06-26", |
| | | contractType: "按年", |
| | | contractStatus: "已创建", |
| | | owner: "Boss", |
| | | productName: "软件", |
| | | startDate: "2023-06-26", |
| | | endDate: "2024-06-25", |
| | | priceTax: "¥5,000.00" |
| | | } |
| | | ], |
| | | tableInfomation: [], |
| | | tableColumn: [ |
| | | { label: "服务合同编号", prop: "serviceContractNumber", min: 100 }, // 服务合同编号 |
| | | { label: "客户名称", prop: "customName", min: 120 }, // 客户名称 |
| | | { label: "签约日期", prop: "signDate" }, // 签约日期 |
| | | { label: "合同类型", prop: "contractType" }, // 合同类型 |
| | | { label: "合同状态", prop: "contractStatus" }, // 合同状态 |
| | | { label: "负责人", prop: "owner" }, // 负责人 |
| | | { label: "服务合同编号", prop: "number", min: 100, isCommonClick: true }, // 服务合同编号 |
| | | { label: "客户名称", prop: "client_name", min: 120, isClientClick: true }, // 客户名称 |
| | | { label: "签约日期", prop: "signTime" }, // 签约日期 |
| | | { label: "合同类型", prop: "serviceContractType" }, // 合同类型 |
| | | { label: "合同状态", prop: "serviceContractStatus" }, // 合同状态 |
| | | { label: "负责人", prop: "member_name" }, // 负责人 |
| | | { label: "产品名称", prop: "productName" }, // 产品名称 |
| | | { label: "服务开始日", prop: "startDate" }, // 服务开始日 |
| | | { label: "服务到期日", prop: "endDate" }, // 服务到期日 |
| | | { label: "服务开始日", prop: "startTime" }, // 服务开始日 |
| | | { label: "服务到期日", prop: "endTime" }, // 服务到期日 |
| | | { label: "价税合计", prop: "priceTax" } // 价税合计 |
| | | ] |
| | | } |
| | | this.searchOptions = [] |
| | | for (let i = 0; i < this.tableList.tableColumn.length; i++) { |
| | | const label = this.tableList.tableColumn[i].label |
| | | this.searchOptions.push({ value: (i + 1).toString(), label: label }) |
| | | const value = this.tableList.tableColumn[i].prop |
| | | this.searchOptions.push({ value: value, label: label }) |
| | | } |
| | | }, |
| | | // 请求数据 |
| | | async getData(keyword, keywordType) { |
| | | this.loading = true |
| | | await getServiceContractList({ |
| | | keyword: keyword, |
| | | keywordType: keywordType, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | }) |
| | | .then((res) => { |
| | | console.log(res) |
| | | if (res.code === 200) { |
| | | if (res.data.list && res.data.list.length > 0) { |
| | | const list = res.data.list.map((item) => { |
| | | return { |
| | | ...item, |
| | | client_name: item.client.name, |
| | | serviceContractStatus: item.serviceContractStatus.name, |
| | | serviceContractType: item.serviceContractType.name, |
| | | member_name: item.member.username |
| | | } |
| | | }) |
| | | this.tableList.tableInfomation = list || [] |
| | | this.pagerOptions.totalCount = res.data.count |
| | | } else { |
| | | this.tableList.tableInfomation = [] |
| | | } |
| | | } else { |
| | | this.tableList.tableInfomation = [] |
| | | } |
| | | this.loading = false |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | this.tableList.tableInfomation = [] |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | // 搜索 |
| | | searchClick(val, content) { |
| | | console.log(val, content) |
| | | this.getData(content, val.label) |
| | | }, |
| | | resetClick() { |
| | | this.search_map = {} |
| | | this.getData() |
| | | }, |
| | | // 新建 |
| | | addBtnClick() { |
| | | this.editConfig.visible = true |
| | | this.editConfig.title = "新建" |
| | | this.editConfig.infomation = { |
| | | customName: "", |
| | | serviceContractNumber: "AC6521", |
| | | owner: "5", |
| | | contactName: "", |
| | | salesOpportunity: "", |
| | | contractOrder: "", |
| | | quotation: "", |
| | | contractType: "", |
| | | signDate: "", |
| | | startDate: "", |
| | | endDate: "", |
| | | contractStatus: "", |
| | | serviceNumber: "", |
| | | termsTreaty: "", |
| | | notes: "", |
| | | approvalWorkflow: "", |
| | | approvalSteps: "", |
| | | approvalPerson: "", |
| | | approvalOpinion: "" |
| | | } |
| | | this.editConfig.infomation = {} |
| | | }, |
| | | // 编辑 |
| | | handleClick(row) { |
| | | console.log(row) |
| | | this.editSalesLeadConfig.visible = true |
| | | this.editSalesLeadConfig.title = "编辑" |
| | | this.editSalesLeadConfig.infomation = { |
| | | customName: "", |
| | | serviceContractNumber: "AC6521", |
| | | owner: "5", |
| | | contactName: "", |
| | | salesOpportunity: "", |
| | | contractOrder: "", |
| | | quotation: "", |
| | | contractType: "", |
| | | signDate: "", |
| | | startDate: "", |
| | | endDate: "", |
| | | contractStatus: "", |
| | | serviceNumber: "", |
| | | termsTreaty: "", |
| | | notes: "", |
| | | approvalWorkflow: "", |
| | | approvalSteps: "", |
| | | approvalPerson: "", |
| | | approvalOpinion: "" |
| | | this.editConfig.visible = true |
| | | this.editConfig.title = "编辑" |
| | | this.editConfig.infomation = { |
| | | ...row, |
| | | contract_number: row.salesDetails.number, |
| | | quotation_number: row.quotation.number |
| | | } |
| | | }, |
| | | // 删除 |
| | | delClick() { |
| | | if (this.selValueList && this.selValueList.length > 0) { |
| | | this.$confirm("是否确认删除?", "警告", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | getDelServiceContract({ ids: this.selValueList }).then((response) => { |
| | | if (response.code === 200) { |
| | | this.$message.success("删除成功") |
| | | this.getData() |
| | | } else { |
| | | this.$message.warning("删除失败") |
| | | } |
| | | }) |
| | | }) |
| | | .catch(() => {}) |
| | | } else { |
| | | this.$message.warning("请至少选择一条记录") |
| | | } |
| | | }, |
| | | getSelectArray(val) { |
| | | console.log(val) |
| | | this.selValueList = [] |
| | | const list = val.map((item) => { |
| | | return item.id |
| | | }) |
| | | this.selValueList = list |
| | | }, |
| | | // 客户名称详情 |
| | | selClientClick(row) { |
| | | console.log(row) |
| | | this.clientDeail.visible = true |
| | | this.clientDeail.infomation = { |
| | | ...row.client, |
| | | client_name: row.client.name, |
| | | client_level: row.client.client_level.name, |
| | | client_status: row.client.client_status.name, |
| | | contact_name: row.contact.name |
| | | } |
| | | }, |
| | | // 服务合同详情 |
| | | selCommonClick(row) { |
| | | console.log(row) |
| | | this.serviceContractDetail.visible = true |
| | | this.serviceContractDetail.infomation = { ...row } |
| | | } |
| | | } |
| | | } |
| | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .service-contract { |
| | | .btn-pager { |
| | | .top { |
| | | margin-bottom: 20px; |
| | | .btn-pager { |
| | | display: flex; |
| | | .page { |
| | | margin-left: auto; |
| | | } |
| | | } |
| | | } |
| | | .detail-top { |
| | | display: flex; |
| | | .page { |
| | | margin-left: auto; |