AuditCloudClient/src/pages/customerManagement/project/ProjectDetail.vue

<template>
  <a-form-model ref="ruleForm" class="project-preview" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <ButtonBox
      v-if="checkPermission('Integrations.ProjectManagement.Update') ||
      checkPermission('Integrations.ProductSeriesManagement') ||
      checkPermission('Integrations.ProductManagement.Create') ||
      checkPermission('Integrations.ProjectManagement.SettlementTemplate.Update') ||
      checkPermission('Integrations.ProjectManagement.Industry.Update') ||
      checkPermission('Integrations.ProjectManagement.Sync') ||
      checkPermission('Integrations.ProjectManagement.Delete')"
      class="mb-20"
    >
      <a-space :size="10">
        <a-button ghost type="primary" v-if="checkPermission('Integrations.ProjectManagement.Update')" @click="showEditProject">编辑项目</a-button>
        <a-button ghost type="primary" v-if="checkPermission('Integrations.ProductSeriesManagement')" @click="showProductSeries">+新增系列</a-button>
        <a-button ghost type="primary" v-if="checkPermission('Integrations.ProductManagement.Create')" @click="showAddProduct">+新增产品</a-button>
        <a-button ghost type="primary" v-if="checkPermission('Integrations.ProjectManagement.SettlementTemplate.Update')" @click="showPayTypeList">+付款方式</a-button>
        <a-button ghost type="primary" v-if="checkPermission('Integrations.ProjectManagement.Industry.Update')" @click="showIndustryEdit">+市场调研</a-button>
        <a-button ghost type="primary" v-if="checkPermission('Integrations.ProjectManagement.Sync')" @click="handlePushProject">同步</a-button>
        <a-button ghost type="danger" v-if="checkPermission('Integrations.ProjectManagement.Delete')" @click="handleDeleteProject">删除</a-button>
      </a-space>
    </ButtonBox>
    <a-card class="mb-10">
      <div class="contentCls">
        <div class="imgCls">
          <img :src="projectInfo.logo" alt="" v-if="projectInfo.logo" />
          <SvgIcon iconClass="icon-liebiaomorenwu" v-else />
        </div>
        <div class="wrapCls">
          <p>{{ projectInfo.projectName }}（{{ projectInfo.projectCode }}）</p>
          <div class="itemCls">
            <div class="item">
              项目类型<span>{{ projectInfo.industry }}</span>
            </div>
            <div class="item">
              产品交付数量<span>{{ projectInfo.productDeliveryCount }}</span>
            </div>
            <div class="item">
              销售客户单价<span>{{ projectInfo.customerAmount | money }}</span>
            </div>
          </div>
          <div class="itemCls">
            <div class="item">
              交付周期<span>{{ projectInfo.deliveryCycle }}月</span>
            </div>
            <div class="item">
              月度交付<span>{{ projectInfo.monthDeliveryCount }}</span>
            </div>
            <div class="item">
              预计合同金额<span>{{ projectInfo.contractAmount | money }}</span>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <OpenCloseBox class="mb-10">
      <div class="form-title">市场调研</div>
      <a-row class="widthstyle">
        <a-col :span="12">
          <a-form-model-item label="所在行业">
            <span>{{ projectInfo.industry }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="主营业务">
            <span>{{ projectInfo.businessScope }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="从业领域">
            <span>{{ projectInfo.businessDomain }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="行业地位">
            <span>{{ projectInfo.rank }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="领域详情">
            <span>{{ projectInfo.domainDetail }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="市场占有">
            <span>{{ projectInfo.marketShare }}%</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="市场客户">
            <span>{{ projectInfo.marketCustomer }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="年度销售金额">
            <span>{{ projectInfo.yearSalesAmount }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="年度销售数量">
            <span>{{ projectInfo.yearSalesNum }}</span>
          </a-form-model-item>
        </a-col>
      </a-row>
    </OpenCloseBox>
    <OpenCloseBox class="mb-10">
      <div class="form-title">付款方式</div>
      <a-row class="widthstyle">
        <a-col :span="12">
          <a-form-model-item label="付款方式">
            <span>{{ settlementInfo.paymentTypeStr }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="账单生成日期">
            <span>{{ settlementInfo.reconciliatioDateType }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="账单结算周期">
            <span>{{ settlementInfo.reconciliationCycle
            }}{{ settlementInfo.reconciliationCycleType }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="账单还款天数">
            <span>{{ settlementInfo.repaymentDays }}</span>
          </a-form-model-item>
        </a-col>
      </a-row>
    </OpenCloseBox>
    <a-card class="mb-5">
      <a-space :size="10">
        <a-input class="custom-search-input" v-model.trim="queryParam.keyWord" placeholder="请输入客户编号、项目编号" allow-clear>
          <SvgIcon slot="prefix" iconClass="icon-sousuo"></SvgIcon>
        </a-input>
        <a-button type="primary" @click="refresh">搜索</a-button>
      </a-space>
    </a-card>
    <a-table class="table-img" :rowKey="(r, i) => i" :columns="columns" :data-source="list" :pagination="pagination"
      :customRow="customRow" @change="changeTable">
      <span slot="customTitle2">
        <SvgIcon iconClass="icon-biaozhi" /> 项目图片
      </span>
      <span slot="customTitle7">
        <SvgIcon iconClass="icon-kehujiancheng" /> 项目名称
      </span>
      <span slot="customTitle4">
        <SvgIcon iconClass="icon-kehubianhao" /> 项目编号
      </span>
      <span slot="customTitle8">
        <SvgIcon iconClass="icon-kehubianhao" /> 产品编号
      </span>
      <span slot="customTitle5">
        <SvgIcon iconClass="icon-kehujiancheng" /> 产品系列
      </span>
      <span slot="customTitle6">
        <SvgIcon iconClass="icon-kehujiancheng" /> 产品型号
      </span>
      <span slot="customTitle11">
        <SvgIcon iconClass="icon-kehujiancheng" /> 产品类型
      </span>
      <span slot="customTitle3">
        <SvgIcon iconClass="icon-kehujiancheng" /> 产品配置
      </span>
      <span slot="customTitle1">
        <SvgIcon iconClass="icon-chuangjianshijian" /> 日期
      </span>
      <div slot="orderDate" slot-scope="text">
        {{ text | moment("YYYY-MM-DD") }}
      </div>
      <div slot="logo">
        <viewer :images="[projectInfo.logo]" v-if="projectInfo.logo">
          <img :src="projectInfo.logo" class="common-img" />
        </viewer>
        <SvgIcon iconClass="icon-liebiaomorenwu" v-else />
      </div>
      <div slot="projectName" slot-scope="text, record">
        <StringSubstr :content="record.projectName" :length="15" />
      </div>
      <div slot="productName" slot-scope="text">
        <StringSubstr :content="text" :length="15" />
      </div>
      <div slot="subtitle" slot-scope="text">
        <StringSubstr :content="text" :length="15" />
      </div>
    </a-table>
    <!-- 市场调研 -->
    <IndustryEdit ref="IndustryEdit" :isCompany="false" @ok="getInfo" />
    <!-- 付款方式 -->
    <PayTypeList ref="payTypeList" :isCompany="false" @ok="getInfo" />
    <!-- 新增系列 -->
    <ProductSeries ref="ProductSeries" />
    <!-- 新增产品 -->
    <ProductAdd ref="ProductAdd" @ok="handleReset" />
    <!-- 编辑项目 -->
    <ProjectAdd ref="ProjectAdd" @ok="getInfo" />
  </a-form-model>
</template>

<script>
import { checkPermission } from '@/utils/abp';
import {
  getProjectDetail,
  getProductList,
  getSettlementDetail,
  deleteProject,
  pushProject,
} from '@/services/fileManagement/customer';
import IndustryEdit from '@/pages/customerManagement/modules/IndustryEdit';
import PayTypeList from '@/pages/customerManagement/modules/PayTypeList';
import ProductSeries from '@/pages/customerManagement/modules/ProductSeries';
import ProductAdd from '@/pages/customerManagement/modules/ProductAdd';
import ProjectAdd from './modules/ProjectAdd';
const columns = [
  {
    slots: { title: 'customTitle2' },
    dataIndex: 'logo',
    scopedSlots: { customRender: 'logo' },
    align: 'center',
    width: 110,
  },
  {
    slots: { title: 'customTitle7' },
    scopedSlots: { customRender: 'projectName' },
  },
  {
    slots: { title: 'customTitle4' },
    dataIndex: 'projectCode',
  },
  {
    slots: { title: 'customTitle8' },
    dataIndex: 'code',
  },
  {
    slots: { title: 'customTitle5' },
    dataIndex: 'productSeriesName',
  },
  {
    slots: { title: 'customTitle6' },
    dataIndex: 'productName',
    scopedSlots: { customRender: 'productName' },
  },
  {
    slots: { title: 'customTitle11' },
    dataIndex: 'productTypeStr',
  },
  {
    slots: { title: 'customTitle3' },
    dataIndex: 'subtitle',
    scopedSlots: { customRender: 'subtitle' },
  },
  {
    slots: { title: 'customTitle1' },
    dataIndex: 'orderDate',
    scopedSlots: { customRender: 'orderDate' },
    width: 110,
  },
];
export default {
  components: {
    IndustryEdit,
    PayTypeList,
    ProductSeries,
    ProductAdd,
    ProjectAdd,
  },
  data() {
    return {
      projectInfo: {},
      settlementInfo: {},
      labelCol: { span: 9 },
      wrapperCol: { span: 15 },
      form: {},
      queryParam: {},
      id: '',
      companyCode: '',
      settlementTemplateId: '',
      columns,
      list: [],
      pagination: this.$store.state.setting.pagination,
    };
  },
  activated() {
    const { id, companyCode } = this.$route.query;
    this.companyCode = companyCode;
    this.id = id;
    this.getInfo();
    this.getList();
  },
  methods: {
    checkPermission,
    showIndustryEdit() {
      this.$refs.IndustryEdit.showDrawer(this.id, this.projectInfo);
    },
    showPayTypeList() {
      this.$refs.payTypeList.showDrawer({
        companyCode: this.companyCode,
        id: this.id,
        settlementTemplateId: this.settlementTemplateId,
      });
    },
    showProductSeries() {
      this.$refs.ProductSeries.showDrawer({
        companyCode: this.companyCode,
        projectId: this.id,
      });
    },
    showAddProduct() {
      this.$refs.ProductAdd.showDrawer({
        companyCode: this.companyCode,
        projectId: this.id,
      });
    },
    showEditProject() {
      this.$refs.ProjectAdd.showDrawer(this.companyCode, this.projectInfo);
    },
    handlePushProject() {
      pushProject(this.id).then(() => {
        this.$message.success('同步成功');
      });
    },
    handleDeleteProject() {
      this.$confirm({
        title: '确认删除该项目?',
        onOk: () => {
          deleteProject(this.id).then(() => {
            this.$message.success('删除成功');
            if (this.$route.query.from == 'list') {
              this.$bus.$emit('closeCurrentPage');
            } else {
              this.$router.go(-1);
            }
          });
        },
      });
    },
    getInfo() {
      getProjectDetail(this.id).then((res) => {
        this.settlementTemplateId = res.settlementTemplateId;
        if (this.settlementTemplateId > 0) {
          this.getSettlement();
        }
        const arr = res.categoryName?.split('|') || [];
        this.projectInfo = {
          ...res,
          industry: arr[0],
          businessDomain: arr[1],
        };
      });
    },
    getSettlement() {
      getSettlementDetail(this.settlementTemplateId).then((res) => {
        this.settlementInfo = res;
      });
    },
    getList() {
      this.loading = true;
      let params = {
        ...this.pagination,
        ...this.queryParam,
        projectId: this.id,
      };
      getProductList(params)
        .then((res) => {
          const arr = [];
          res.items.forEach((item) => {
            arr.push({
              ...item,
              ...item.chargeDetail,
            });
          });
          this.list = arr;
          const pagination = { ...this.pagination };
          pagination.total = res.totalCount;
          this.pagination = pagination;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleReset() {
      this.queryParam = {};
      this.refresh();
    },
    refresh() {
      this.pagination.current = 1;
      this.getList();
    },
    changeTable(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getList();
    },
    customRow(record) {
      return {
        on: {
          // 事件
          click: (event) => {
            if (event.srcElement.nodeName == 'IMG') return;
            this.$router.push({
              path: 'productDetail',
              query: {
                id: record.id,
                companyCode: record.companyCode,
              },
            });
          },
        },
      };
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/pages/customerManagement/product/style/product.less";

.project-preview {
  /deep/ .ant-form-item {
    height: 40px;
    margin-bottom: 0;
    color: #333;

    .ant-form-item-label>label {
      color: #999;
    }
  }
}
</style>