lizhuo submits AnnualSaleGoal at 2023-7-19 17:00

src/api/business/spd/goal_management/monthGoalMerge.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询月销售目标合并列表
 export function listMonthGoalMerge(query) {
   return request({
-    url: '/goal_management/monthGoalMerge/list',
+    url: '/goal_management/MonthGoalMerge/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listMonthGoalMerge(query) {
 // 查询月销售目标合并详细
 export function getMonthGoalMerge(id) {
   return request({
-    url: '/goal_management/monthGoalMerge/' + id,
+    url: '/goal_management/MonthGoalMerge/' + id,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getMonthGoalMerge(id) {
 // 新增月销售目标合并
 export function addMonthGoalMerge(data) {
   return request({
-    url: '/goal_management/monthGoalMerge',
+    url: '/goal_management/MonthGoalMerge',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addMonthGoalMerge(data) {
 // 修改月销售目标合并
 export function updateMonthGoalMerge(data) {
   return request({
-    url: '/goal_management/monthGoalMerge',
+    url: '/goal_management/MonthGoalMerge',
     method: 'put',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateMonthGoalMerge(data) {
 // 删除月销售目标合并
 export function delMonthGoalMerge(id) {
   return request({
-    url: '/goal_management/monthGoalMerge/' + id,
+    url: '/goal_management/MonthGoalMerge/' + id,
     method: 'delete'
   })
 }

src/views/business/spd/goal_management/MonthGoalMerge.vue

@@ -2,76 +2,96 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="编码" prop="code">
-        <el-input
-          v-model="queryParams.code"
-          placeholder="请输入编码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.code" placeholder="请输入编码" clearable @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="目标名称" prop="goalName">
-        <el-input
-          v-model="queryParams.goalName"
-          placeholder="请输入目标名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.goalName" placeholder="请输入目标名称" clearable @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="单据日期" prop="documentDate">
-        <el-date-picker clearable
-                        v-model="queryParams.documentDate"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="请选择单据日期">
+        <el-date-picker
+          v-model="queryParams.documentDateRange"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @keyup.enter.native="handleQuery"
+          :picker-options="pickerOptions">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="年度" prop="annual">
-        <el-input
+        <el-date-picker
           v-model="queryParams.annual"
-          placeholder="请输入年度"
+          type="year"
           clearable
+          value-format="yyyy"
           @keyup.enter.native="handleQuery"
-        />
+          placeholder="请输入年度">
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="月份" prop="monthly">
-        <el-input
+        <el-date-picker
           v-model="queryParams.monthly"
-          placeholder="请输入月份"
+          type="month"
           clearable
+          value-format="M"
           @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="客户" prop="custom">
-        <el-input
-          v-model="queryParams.custom"
-          placeholder="请输入客户"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+          placeholder="请输入月份">
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="制单人" prop="creator">
-        <el-input
-          v-model="queryParams.creator"
-          placeholder="请输入制单人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-popover-select-v2 v-model="queryParams.creator" title="制单人" valueKey="name"
+                              referName="CONTACTS_PARAM"
+                              :dataMapping="{ creatorCode: 'code', creator: 'name'}"
+                              :source.sync="queryParams" placeholder="请输入制单人">
+        </el-popover-select-v2>
       </el-form-item>
       <el-form-item label="部门" prop="dept">
-        <el-input
-          v-model="queryParams.dept"
-          placeholder="请输入部门"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-popover-select-v2 v-model="queryParams.dept" title="部门" valueKey="name"
+                              referName="DEPT_PARAM"
+                              :dataMapping="{ deptCode: 'code', dept: 'name'}"
+                              :source.sync="queryParams" placeholder="请输入部门">
+        </el-popover-select-v2>
       </el-form-item>
       <el-form-item label="目标类型" prop="goalCategory">
-        <el-input
-          v-model="queryParams.goalCategory"
-          placeholder="请输入目标类型"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-select v-model="queryParams.goalCategory" placeholder="请输入目标类型" @change="changeGoalCategory" @keyup.enter.native="handleQuery">
+          <el-option
+            v-for="item in goalCategoryList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="queryParams.goalCategory === '客户维度'" label="客户" prop="custom">
+        <el-popover-select-v2 v-model="queryParams.custom" title="客户" valueKey="name"
+                              referName="CUSTOMER_PARAM"
+                              :dataMapping="{ customCode: 'code', custom: 'name'}"
+                              :source.sync="queryParams" placeholder="请输入客户">
+        </el-popover-select-v2>
+      </el-form-item>
+      <el-form-item v-if="queryParams.goalCategory === '销售区域'" label="销售区域" prop="saleZone">
+        <el-popover-select-v2 v-model="queryParams.saleZoneCode" title="销售区域" valueKey="name"
+                              referName="DEPT_PARAM"
+                              :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+                              :source.sync="queryParams" placeholder="请输入销售区域">
+        </el-popover-select-v2>
+      </el-form-item>
+      <el-form-item v-if="queryParams.goalCategory === '一级分类'" label="一级分类" prop="oneLevelClassify">
+        <el-select v-model="queryParams.oneLevelClassify" size="mini" clearable
+                   @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '一级物料分类')"
+                   style="width: 200px">
+          <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="queryParams.goalCategory === '二级分类'" label="二级分类" prop="custom">
+        <el-select v-model="queryParams.twoLevelClassify" size="mini" clearable
+                   @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '二级物料分类')"
+                   style="width: 200px">
+          <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -129,15 +149,16 @@
       </el-table-column>
       <el-table-column label="年度" align="center" prop="annual"/>
       <el-table-column label="月份" align="center" prop="monthly"/>
+      <el-table-column label="客户编码" align="center" prop="customCode"/>
       <el-table-column label="客户" align="center" prop="custom"/>
-      <el-table-column label="saleZone" align="center" prop="saleZone"/>
-      <el-table-column label="oneLevel" align="center" prop="oneLevelClassify"/>
-      <el-table-column label="twoLevel" align="center" prop="twoLevelClassify"/>
+      <el-table-column label="制单人编码" align="center" prop="creatorCode"/>
       <el-table-column label="制单人" align="center" prop="creator"/>
+      <el-table-column label="部门编码" align="center" prop="deptCode"/>
       <el-table-column label="部门" align="center" prop="dept"/>
       <el-table-column label="目标类型" align="center" prop="goalCategory"/>
       <el-table-column label="目标值合计" align="center" prop="goalSum"/>
       <el-table-column label="单据状态" align="center" prop="documentStatus"/>
+      <el-table-column label="删除状态" align="center" prop="deleteStatus"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -168,17 +189,18 @@
       @pagination="getList"
     />
 
-    <el-drawer title="我是标题" :visible.sync="drawerMain" :direction="direction" :before-close="handleClose" size="100%">
-      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-row :gutter="20" style="margin-right: 20px">
+    <!-- 添加或修改月销售目标合并抽屉 -->
+    <el-drawer :title="title" :visible.sync="open" direction="rtl" :before-close="handleClose" size="100%">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="编码" prop="code">
-              <el-input v-model="form.code" placeholder="编码自动生成" disabled />
+              <el-input v-model="form.code" placeholder="编码后端自动生成" disabled/>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="目标名称" prop="goalName">
-              <el-input v-model="form.goalName" placeholder="请输入目标名称" disabled />
+              <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" disabled/>
             </el-form-item>
           </el-col>
           <el-col :span="6">
@@ -193,47 +215,47 @@
           </el-col>
           <el-col :span="6">
             <el-form-item label="年度" prop="annual">
-              <el-select v-model="form.annual" filterable clearable placeholder="请选择年度">
-                <el-option
-                  v-for="item in annualList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+              <el-date-picker clearable
+                              v-model="form.annual"
+                              type="year"
+                              value-format="yyyy"
+                              placeholder="请输入年度">
+              </el-date-picker>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="20" style="margin-right: 20px">
+        <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="月份" prop="monthly">
-              <el-select v-model="form.monthly" filterable clearable placeholder="请选择月份">
-                <el-option
-                  v-for="item in monthList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+              <el-date-picker clearable
+                              v-model="form.monthly"
+                              type="month"
+                              value-format="M"
+                              placeholder="请输入月份">
+              </el-date-picker>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="制单人" prop="creator">
-              <el-popover-select-v2 v-model="form.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
-                                    :dataMapping="{ creatorCode: 'code', creator: 'name' }" :source.sync="form" placement="请输入制单人"
-              ></el-popover-select-v2>
+              <el-popover-select-v2 v-model="form.creator" title="制单人" valueKey="name"
+                                    referName="CONTACTS_PARAM"
+                                    :dataMapping="{ creatorCode: 'code', creator: 'name'}"
+                                    :source.sync="form" placeholder="请输入制单人">
+              </el-popover-select-v2>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="部门" prop="dept">
-              <el-popover-select-v2 v-model="form.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
-                                    :dataMapping="{ deptCode: 'code', dept: 'name' }" :source.sync="form" placement="请输入部门"
-              ></el-popover-select-v2>
+              <el-popover-select-v2 v-model="form.dept" title="部门" valueKey="name"
+                                    referName="DEPT_PARAM"
+                                    :dataMapping="{ deptCode: 'code', dept: 'name'}"
+                                    :source.sync="form" placeholder="请输入部门">
+              </el-popover-select-v2>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="目标类型" prop="goalCategory">
-              <el-select v-model="form.goalCategory" filterable clearable placeholder="请选择目标类型" @change="changeGoalCate">
+              <el-select v-model="form.goalCategory" placeholder="请输入目标类型" @change="changeGoalCategoryForm" @keyup.enter.native="handleQuery">
                 <el-option
                   v-for="item in goalCategoryList"
                   :key="item.value"
@@ -244,46 +266,161 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="20" style="margin-right: 20px">
+        <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="目标值合计" prop="goalSum">
-              <el-input v-model="form.goalSum" placeholder="请输入目标值合计" disabled/>
+              <el-input v-model="form.goalSum" placeholder="目标值合计自动计算" disabled/>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item v-if="form.goalCategory === '客户维度'" label="客户" prop="custom">
-              <el-popover-select-v2
-                v-model="form.custom" title="客户" valueKey="name" referName="CUSTOMER_PARAM"
-                :dataMapping="{ customCode: 'code', custom: 'name' }" :source.sync="form" placeholder="请输入客户"
-              ></el-popover-select-v2>
+              <el-popover-select-v2 v-model="form.custom" title="客户" valueKey="name"
+                                    referName="CUSTOMER_PARAM"
+                                    :dataMapping="{ customCode: 'code', custom: 'name'}"
+                                    :source.sync="form" placeholder="请输入客户">
+              </el-popover-select-v2>
             </el-form-item>
             <el-form-item v-if="form.goalCategory === '销售区域'" label="销售区域" prop="saleZone">
-              <el-popover-select-v2
-                @change="aaaaa"
-                v-model="form.saleZone" title="销售区域" valueKey="name" referName="ORG_PARAM"
-                :dataMapping="{ saleZoneCode: 'code', saleZone: 'name' }" :source.sync="form" placeholder="请输入销售区域"
-              ></el-popover-select-v2>
+              <el-popover-select-v2 v-model="form.saleZoneCode" title="销售区域" valueKey="name"
+                                    referName="DEPT_PARAM"
+                                    :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+                                    :source.sync="form" placeholder="请输入销售区域">
+              </el-popover-select-v2>
             </el-form-item>
-            <el-form-item v-if="form.goalCategory === '一级分类'" label="一级物料" prop="oneLevelClassify">
-              <el-select v-model="form.oneLevelClassify" placeholder="请输入一级物料" clearable
-                         @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '一级物料分类')"
-              ></el-select>
+            <el-form-item v-if="form.goalCategory === '一级分类'" label="一级分类" prop="oneLevelClassify">
+              <el-select v-model="form.oneLevelClassify" size="mini" clearable
+                         @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '一级物料分类')"
+                         style="width: 200px">
+                <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
             </el-form-item>
-            <el-form-item v-if="form.goalCategory === '二级分类'" label="二级物料" prop="twoLevelClassify">
-              <el-select v-model="form.twoLevelClassify" placeholder="请输入二级物料" clearable
-                         @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '二级物料分类')"
-              ></el-select>
+            <el-form-item v-if="form.goalCategory === '二级分类'" label="二级分类" prop="custom">
+              <el-select v-model="form.twoLevelClassify" size="mini" clearable
+                         @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '二级物料分类')"
+                         style="width: 200px">
+                <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-button type="primary" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
+            <el-form-item label="操作">
+              <el-button type="primary" @click="submitForm">确 定</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </el-form-item>
           </el-col>
         </el-row>
       </el-form>
+
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddDetails">增行</el-button>
+        </el-col>
+      </el-row>
+<!--      v-loading="loading"-->
+      <el-table :data="monthGoalMergeDetailsList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" fixed />
+        <el-table-column label="销售组织" align="center" prop="saleOrg" width="180">
+          <template slot-scope="scope">
+            <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].saleOrg" title="销售组织" valueKey="name"
+                                  referName="CUSTOMER_PARAM"
+                                  :dataMapping="{ saleOrgCode: 'code', saleOrg: 'name'}"
+                                  :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入销售组织">
+            </el-popover-select-v2>
+          </template>
+        </el-table-column>
+        <el-table-column label="销售区域" align="center" prop="saleZone" width="180">
+          <template slot-scope="scope">
+            <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].saleZone" title="销售区域" valueKey="name"
+                                  referName="CUSTOMER_PARAM"
+                                  :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+                                  :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入销售区域">
+            </el-popover-select-v2>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户" align="center" prop="custom" width="180">
+          <template slot-scope="scope">
+            <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].custom" title="客户" valueKey="name"
+                                  referName="CUSTOMER_PARAM"
+                                  :dataMapping="{ customCode: 'code', custom: 'name'}"
+                                  :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入客户">
+            </el-popover-select-v2>
+          </template>
+        </el-table-column>
+        <el-table-column label="部门" align="center" prop="dept" width="180">
+          <template slot-scope="scope">
+            <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].dept" title="部门" valueKey="name"
+                                  referName="DEPT_PARAM"
+                                  :dataMapping="{ deptCode: 'code', dept: 'name'}"
+                                  :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入客户">
+            </el-popover-select-v2>
+          </template>
+        </el-table-column>
+        <el-table-column label="制单人" align="center" prop="creator" width="180">
+          <template slot-scope="scope">
+            <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].creator" title="负责人" valueKey="name"
+                                  referName="CONTACTS_PARAM"
+                                  :dataMapping="{ creatorCode: 'code', creator: 'name'}"
+                                  :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入负责人">
+            </el-popover-select-v2>
+          </template>
+        </el-table-column>
+        <el-table-column label="科室" align="center" prop="department" width="180">
+          <template slot-scope="scope">
+            <el-input v-model="monthGoalMergeDetailsList[scope.$index].department" placeholder="请输入科室"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="一级分类" align="center" prop="oneLevelClassify" width="180">
+          <template slot-scope="scope">
+            <el-input v-model="monthGoalMergeDetailsList[scope.$index].oneLevelClassify" disabled></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="二级分类" align="center" prop="twoLevelClassify" width="180">
+          <template slot-scope="scope">
+            <el-input v-model="monthGoalMergeDetailsList[scope.$index].twoLevelClassify" disabled></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="物料" align="center" prop="material" width="180">
+          <template slot-scope="scope">
+            <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].material" title="物料" valueKey="name"
+                                  referName="MATERIAL_PARAM"
+                                  :dataMapping="{ materialCode: 'code', material: 'name'}"
+                                  :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入物料">
+            </el-popover-select-v2>
+          </template>
+        </el-table-column>
+        <el-table-column label="月份" align="center" prop="num" width="250">
+          <template slot-scope="scope">
+            <el-date-picker v-model="monthGoalMergeDetailsList[scope.$index].monthly" value-format="M" type="month" placeholder="选择月份">
+            </el-date-picker>
+          </template>
+        </el-table-column>
+        <el-table-column label="目标值" align="center" prop="totalGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number @change="computeTotal" v-model="monthGoalMergeDetailsList[scope.$index].goalValue" :precision="2" :step="1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px" fixed="right">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDeleteDetails(scope.$index, scope.row)"
+            >删除</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleCopyDetails(scope.row)"
+            >复制</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
     </el-drawer>
 
-    <TreeRefers ref="tree" :single="true" @doSubmit="selectionsToTreeInput"></TreeRefers>
+    <TreeRefers ref="treeQuery" @doSubmit="selectionsToInputForQuery" :single="true"/>
+    <TreeRefers ref="treeDetails" @doSubmit="selectionsToInputForDetails" :single="true"/>
   </div>
 </template>
 
@@ -296,11 +433,12 @@ import {
   updateMonthGoalMerge
 } from "@/api/business/spd/goal_management/monthGoalMerge";
 
+// 树形参照
 import TreeRefers from '@/components/Refers/treeRefer.vue'
 import ElPopoverSelectV2 from "@/components/popover-select-v2"
 
 export default {
-  name: "monthGoalMerge",
+  name: "MonthGoalMerge",
   components: {
     TreeRefers, ElPopoverSelectV2
   },
@@ -320,6 +458,7 @@ export default {
       total: 0,
       // 月销售目标合并表格数据
       monthGoalMergeList: [],
+      monthGoalMergeDetailsList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -335,12 +474,6 @@ export default {
         monthly: null,
         customCode: null,
         custom: null,
-        saleZoneCode: null,
-        saleZone: null,
-        oneLevelClassifyCode: null,
-        oneLevelClassify: null,
-        twoLevelClassifyCode: null,
-        twoLevelClassify: null,
         creatorCode: null,
         creator: null,
         deptCode: null,
@@ -349,6 +482,40 @@ export default {
         goalSum: null,
         documentStatus: null,
         deleteStatus: null,
+        saleZoneCode: null,
+        saleZone: null,
+        oneLevelClassifyCode: null,
+        oneLevelClassify: null,
+        twoLevelClassifyCode: null,
+        twoLevelClassify: null,
+        documentDateRange: null
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
       },
       // 表单参数
       form: {
@@ -360,12 +527,6 @@ export default {
         monthly: null,
         customCode: null,
         custom: null,
-        saleZoneCode: null,
-        saleZone: null,
-        oneLevelClassifyCode: null,
-        oneLevelClassify: null,
-        twoLevelClassifyCode: null,
-        twoLevelClassify: null,
         creatorCode: null,
         creator: null,
         deptCode: null,
@@ -373,20 +534,33 @@ export default {
         goalCategory: null,
         goalSum: null,
         documentStatus: null,
-        deleteStatus: null
+        deleteStatus: null,
+        saleZoneCode: null,
+        saleZone: null,
+        oneLevelClassifyCode: null,
+        oneLevelClassify: null,
+        twoLevelClassifyCode: null,
+        twoLevelClassify: null
       },
-      formDetails: {},
-      // 表单校验
-      rules: {
-        custom: [{required: true, message: 'kehu不能为空', trigger: 'blur'}],
-        saleZone: [{required: true, message: 'xiaoshouquyu不能为空', trigger: 'blur'}],
-        oneLevelClassify: [{required: true, message: 'yijifenlei不能为空', trigger: 'blur'}],
-        twoLevelClassify: [{required: true, message: 'erjifenlei不能为空', trigger: 'blur'}]
+      formDetails: {
+        id: null,
+        saleOrg: null,
+        saleZone: null,
+        custom: null,
+        dept: null,
+        creator: null,
+        department: null,
+        oneLevelClassifyCode: null,
+        oneLevelClassify: null,
+        twoLevelClassifyCode: null,
+        twoLevelClassify: null,
+        materialCode: null,
+        material: null,
+        monthly: null,
+        goalValue: null
       },
-      // 主表添加or编辑抽屉
-      drawerMain: false,
-      drawerInner: false,
-      direction: 'rtl',
+      // 表单校验
+      rules: {},
       // 目标类型列表
       goalCategoryList: [
         { value: '客户维度', label: '客户维度' },
@@ -394,52 +568,17 @@ export default {
         { value: '一级分类', label: '一级分类' },
         { value: '二级分类', label: '二级分类' }
       ],
-      // 年度列表，月度列表
-      annualList: [
-        {value: '2023', label: '2023'},
-        {value: '2024', label: '2024'},
-        {value: '2025', label: '2025'},
-        {value: '2026', label: '2026'},
-        {value: '2027', label: '2027'},
-        {value: '2028', label: '2028'},
-        {value: '2029', label: '2029'},
-        {value: '2030', label: '2030'},
-        {value: '2031', label: '2031'},
-        {value: '2034', label: '2034'},
-        {value: '2035', label: '2035'},
-        {value: '2036', label: '2036'},
-        {value: '2037', label: '2037'},
-        {value: '2038', label: '2038'},
-        {value: '2039', label: '2039'},
-        {value: '2040', label: '2040'},
-        {value: '2041', label: '2041'},
-        {value: '2042', label: '2042'},
-        {value: '2043', label: '2043'},
-        {value: '2044', label: '2044'},
-        {value: '2045', label: '2045'},
-      ],
-      monthList: [
-        {value: '1', label: '1'},
-        {value: '2', label: '2'},
-        {value: '3', label: '3'},
-        {value: '4', label: '4'},
-        {value: '5', label: '5'},
-        {value: '6', label: '6'},
-        {value: '7', label: '7'},
-        {value: '8', label: '8'},
-        {value: '9', label: '9'},
-        {value: '10', label: '10'},
-        {value: '11', label: '11'},
-        {value: '12', label: '12'},
-      ],
-      // 参照条件 & 树形参照列表
-      referCondition: { type: '', isPage: true, title: '' },
-      classList: []
+      // 树形参照
+      referCondition: {
+        type: '',
+        isPage: true,
+        title: ''
+      },
+      classOptions: []
     };
   },
   created() {
     this.getList();
-    console.log(this.form);
   },
   methods: {
     /** 查询月销售目标合并列表 */
@@ -453,7 +592,7 @@ export default {
     },
     // 取消按钮
     cancel() {
-      this.drawerMain = false;
+      this.open = false;
       this.reset();
     },
     // 表单重置
@@ -469,22 +608,18 @@ export default {
         custom: null,
         creatorCode: null,
         creator: null,
-        saleZoneCode: null,
-        saleZone: null,
-        oneLevelClassifyCode: null,
-        oneLevelClassify: null,
-        twoLevelClassifyCode: null,
-        twoLevelClassify: null,
         deptCode: null,
         dept: null,
         goalCategory: null,
         goalSum: null,
         documentStatus: null,
         deleteStatus: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
+        saleZoneCode: null,
+        saleZone: null,
+        oneLevelClassifyCode: null,
+        oneLevelClassify: null,
+        twoLevelClassifyCode: null,
+        twoLevelClassify: null
       };
       this.resetForm("form");
     },
@@ -507,9 +642,31 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      this.drawerMain = true;
+      this.open = true;
       this.title = "添加月销售目标合并";
     },
+    handleAddDetails() {
+      let list = {
+        id: null,
+        code: null,
+        saleOrg: null,
+        saleZone: null,
+        custom: null,
+        dept: null,
+        creator: null,
+        oneLevelClassifyCode: null,
+        oneLevelClassify: null,
+        twoLevelClassifyCode: null,
+        twoLevelClassify: null,
+        materialCode: null,
+        material: null,
+        department: null,
+        num: null,
+        monthly: null,
+        goalValue: null
+      }
+      this.monthGoalMergeDetailsList.push(list)
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
@@ -522,24 +679,22 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      console.log(this.form);
+      this.resetQuery()
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateMonthGoalMerge(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
-              this.drawerMain = false;
+              this.open = false;
               this.getList();
             });
           } else {
-            this.form.deleteStatus = 0
-            this.form.documentStatus = '开立态'
-            this.form.goalSum = 0.000000
-            addMonthGoalMerge(this.form).then(response => {
+            console.log(this.form);
+            /*addMonthGoalMerge(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
-              this.drawerMain = false;
+              this.open = false;
               this.getList();
-            });
+            });*/
           }
         }
       });
@@ -555,128 +710,196 @@ export default {
       }).catch(() => {
       });
     },
+    handleDeleteDetails(index, row) {
+      this.monthGoalMergeDetailsList.splice(index, 1)
+      this.computeTotal()
+    },
     /** 导出按钮操作 */
     handleExport() {
       this.download('goal_management/monthGoalMerge/export', {
         ...this.queryParams
-      }, `monthGoalMerge_${new Date().getTime()}.xlsx`)
+      }, `monthGoalMerge${new Date().getTime()}.xlsx`)
     },
-    // 关闭抽屉
-    handleClose(done) {
-      this.$confirm('确认关闭？')
-        .then(_ => {
-          done();
-        })
-        .catch(_ => {});
+    // 树形参照
+    chooseTreeReferForQuery(type, isPage, title) {
+      this.referCondition.type = type
+      this.referCondition.isPage = isPage
+      this.referCondition.title = title
+      this.$refs.treeQuery.init(this.referCondition)
     },
-    // 选择树形参照
-    chooseTreeRefer(type, isPage, title) {
+    chooseTreeReferForDetails(type, isPage, title) {
       this.referCondition.type = type
       this.referCondition.isPage = isPage
       this.referCondition.title = title
-      this.$refs.tree.init(this.referCondition)
+      this.$refs.treeDetails.init(this.referCondition)
     },
-    // 给参照字段赋值
-    selectionsToTreeInput(selection) {
-      this.classList.push(selection)
-      console.log(this.drawerInner);
+    selectionsToInputForQuery(selection) {
+      this.classOptions.push(selection)
       if (this.referCondition.title === '一级物料分类') {
         if (selection.code.length !== 1) {
-          return this.$message.error('请在一级分类里面选择')
+          return this.$message.info('请在一级分类下选择')
+        }
+        this.queryParams.oneLevelClassifyCode = selection.code
+        this.queryParams.oneLevelClassify = selection.name
+        this.form.oneLevelClassifyCode = selection.code
+        this.form.oneLevelClassify = selection.name
+      } else if (this.referCondition.title === '二级物料分类') {
+        if (selection.code.length !== 4) {
+          return this.$message.info('请在二级分类下选择')
         }
-        if (this.drawerInner) {
-          this.formDetails.oneLevelClassifyCode = selection.code
-          this.formDetails.oneLevelClassify = selection.name
+        this.queryParams.twoLevelClassifyCode = selection.code
+        this.queryParams.twoLevelClassify = selection.name
+        this.form.twoLevelClassifyCode = selection.code
+        this.form.twoLevelClassify = selection.name
+      }
+    },
+    selectionsToInputForDetails(selection) {
+      this.classOptions.push(selection)
+      if (this.referCondition.title === '一级物料分类') {
+        if (selection.code.length !== 1) {
+          return this.$message.info('请在一级分类中选择')
+        }
+        this.formDetails.oneLevelClassifyCode = selection.code
+        this.formDetails.oneLevelClassify = selection.name
+        if (selection.code !== this.formDetails.oneLevelClassifyCode) {
           this.formDetails.twoLevelClassifyCode = null
           this.formDetails.twoLevelClassify = null
-        } else {
-          this.form.oneLevelClassifyCode = selection.code
-          this.form.oneLevelClassify = selection.name
         }
       } else if (this.referCondition.title === '二级物料分类') {
         if (selection.code.length !== 4) {
-          return this.$message.error('请在二级分类里面选择')
-        }
-        if (this.drawerInner) {
-          if (this.formDetails.oneLevelClassifyCode === null || this.formDetails.oneLevelClassifyCode === '') {
-            return this.$message.error('请先填写一级分类')
-          }
-          if (selection.code[0] !== this.formDetails.oneLevelClassifyCode) {
-            return this.$message.error('所选择的二级分类不属于已选的一级分类')
-          }
-          this.formDetails.twoLevelClassifyCode = selection.code
-          this.formDetails.twoLevelClassify = selection.name
-        } else {
-          this.form.twoLevelClassifyCode = selection.code
-          this.form.twoLevelClassify = selection.name
+          return this.$message.info('请在二级分类中选择')
+        } else if (selection.code[0] !== this.formDetails.oneLevelClassifyCode) {
+          return this.$message.error('所选择的二级物料分类不属于一级分类')
         }
+        this.formDetails.twoLevelClassifyCode = selection.code
+        this.formDetails.twoLevelClassify = selection.name
       }
     },
-    // 当值为null时，设置编码为0
-    changeDetailsCode() {
-      const one = this.formDetails.oneLevelClassify
-      const two = this.formDetails.twoLevelClassify
-      if (one.length === 0 || one === '') {
-        this.formDetails.oneLevelClassifyCode = null
-      }
-      if (two.length === 0 || two === '') {
-        this.formDetails.twoLevelClassifyCode = null
+    // 改变查询表单的目标分类
+    changeGoalCategory() {
+      let condition = this.queryParams.goalCategory
+      if (condition === null) {
+        this.queryParams.custom = null
+        this.queryParams.customCode = null
+        this.queryParams.saleZone = null
+        this.queryParams.saleZoneCode = null
+        this.queryParams.oneLevelClassify = null
+        this.queryParams.oneLevelClassifyCode = null
+        this.queryParams.twoLevelClassify = null
+        this.queryParams.twoLevelClassifyCode = null
+      } else if (condition === '客户维度') {
+        this.queryParams.saleZone = null
+        this.queryParams.saleZoneCode = null
+        this.queryParams.oneLevelClassify = null
+        this.queryParams.oneLevelClassifyCode = null
+        this.queryParams.twoLevelClassify = null
+        this.queryParams.twoLevelClassifyCode = null
+      } else if (condition === '销售区域') {
+        this.queryParams.custom = null
+        this.queryParams.customCode = null
+        this.queryParams.oneLevelClassify = null
+        this.queryParams.oneLevelClassifyCode = null
+        this.queryParams.twoLevelClassify = null
+        this.queryParams.twoLevelClassifyCode = null
+      } else if (condition === '一级分类') {
+        this.queryParams.custom = null
+        this.queryParams.customCode = null
+        this.queryParams.saleZone = null
+        this.queryParams.saleZoneCode = null
+        this.queryParams.twoLevelClassify = null
+        this.queryParams.twoLevelClassifyCode = null
+      } else if (condition === '二级分类') {
+        this.queryParams.custom = null
+        this.queryParams.customCode = null
+        this.queryParams.saleZone = null
+        this.queryParams.saleZoneCode = null
+        this.queryParams.oneLevelClassify = null
+        this.queryParams.oneLevelClassifyCode = null
       }
     },
-    changeGoalCate() {
-      if (this.form.goalCategory === null || this.form.goalCategory === '') {
-        this.form.customCode = null
+    changeGoalCategoryForm() {
+      let condition = this.form.goalCategory
+      if (condition === null) {
         this.form.custom = null
-        this.form.saleZoneCode = null
+        this.form.customCode = null
         this.form.saleZone = null
-        this.form.oneLevelClassifyCode = null
+        this.form.saleZoneCode = null
         this.form.oneLevelClassify = null
-        this.form.twoLevelClassifyCode = null
-        this.form.twoLevelClassify = null
-        this.rules = {
-          custom: [{required: true, message: 'kehu不能为空', trigger: 'blur'}],
-          saleZone: [{required: true, message: 'xiaoshouquyu不能为空', trigger: 'blur'}],
-          oneLevelClassify: [{required: true, message: 'yijifenlei不能为空', trigger: 'blur'}],
-          twoLevelClassify: [{required: true, message: 'erjifenlei不能为空', trigger: 'blur'}]
-        }
-      } else if (this.form.goalCategory === '销售区域') {
-        this.form.customCode = null
-        this.form.custom = null
         this.form.oneLevelClassifyCode = null
-        this.form.oneLevelClassify = null
-        this.form.twoLevelClassifyCode = null
         this.form.twoLevelClassify = null
-        this.rules = {
-          saleZone: [{required: true, message: 'xiaoshouquyu不能为空', trigger: 'blur'}]
-        }
-      } else if (this.form.goalCategory === '客户维度') {
-        this.form.saleZoneCode = null
+        this.form.twoLevelClassifyCode = null
+      } else if (condition === '客户维度') {
         this.form.saleZone = null
-        this.form.oneLevelClassifyCode = null
+        this.form.saleZoneCode = null
         this.form.oneLevelClassify = null
-        this.form.twoLevelClassifyCode = null
+        this.form.oneLevelClassifyCode = null
         this.form.twoLevelClassify = null
-      } else if (this.form.goalCategory === '一级分类') {
+        this.form.twoLevelClassifyCode = null
+      } else if (condition === '销售区域') {
+        this.form.custom = null
         this.form.customCode = null
+        this.form.oneLevelClassify = null
+        this.form.oneLevelClassifyCode = null
+        this.form.twoLevelClassify = null
+        this.form.twoLevelClassifyCode = null
+      } else if (condition === '一级分类') {
         this.form.custom = null
-        this.form.saleZoneCode = null
+        this.form.customCode = null
         this.form.saleZone = null
-        this.form.twoLevelClassifyCode = null
+        this.form.saleZoneCode = null
         this.form.twoLevelClassify = null
-      } else if (this.form.goalCategory === '二级分类') {
-        this.form.customCode = null
+        this.form.twoLevelClassifyCode = null
+      } else if (condition === '二级分类') {
         this.form.custom = null
-        this.form.saleZoneCode = null
+        this.form.customCode = null
         this.form.saleZone = null
-        this.form.oneLevelClassifyCode = null
+        this.form.saleZoneCode = null
         this.form.oneLevelClassify = null
+        this.form.oneLevelClassifyCode = null
+      }
+    },
+    // 关闭抽屉
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+          this.resetQuery()
+        })
+        .catch(_ => {});
+    },
+    // 复制明细
+    handleCopyDetails(row) {
+      let list = {
+        id: row.id,
+        code: row.code,
+        saleOrg: row.saleOrg,
+        saleZone: row.saleZone,
+        custom: row.custom,
+        dept: row.dept,
+        creator: row.creator,
+        oneLevelClassifyCode: row.oneLevelClassifyCode,
+        oneLevelClassify: row.oneLevelClassify,
+        twoLevelClassifyCode: row.twoLevelClassifyCode,
+        twoLevelClassify: row.twoLevelClassify,
+        materialCode: row.materialCode,
+        material: row.material,
+        department: row.department,
+        num: row.num,
+        monthly: row.monthly,
+        goalValue: row.goalValue
       }
+      this.monthGoalMergeDetailsList.push(list)
+      this.computeTotal()
+    },
+    // 计算主表合计
+    computeTotal() {
+      let list = this.monthGoalMergeDetailsList
+      let sum = 0
+      for (const listElement of list) {
+        sum = (sum * 1000000 + listElement.goalValue * 1000000) / 1000000
+      }
+      this.form.goalSum = sum
     }
   }
 };
 </script>
-
-<style scoped>
-
-</style>
-