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

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

@@ -0,0 +1,771 @@
+<template>
+  <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-form-item>
+      <el-form-item label="年度销售目标名称" prop="goalName">
+        <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>
+      </el-form-item>
+      <el-form-item label="年度" prop="annual">
+        <el-input
+          v-model="queryParams.annual"
+          placeholder="请输入年度"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="客户编码" prop="customCode">
+        <el-input
+          v-model="queryParams.customCode"
+          placeholder="请输入客户编码"
+          clearable
+          @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"
+        />
+      </el-form-item>
+      <el-form-item label="销售区域编码" prop="saleZoneCode">
+        <el-input
+          v-model="queryParams.saleZoneCode"
+          placeholder="请输入销售区域编码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="销售区域" prop="saleZone">
+        <el-input
+          v-model="queryParams.saleZone"
+          placeholder="请输入销售区域"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="制单人编码" prop="creatorCode">
+        <el-input
+          v-model="queryParams.creatorCode"
+          placeholder="请输入制单人编码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="制单人" prop="creator">
+        <el-input
+          v-model="queryParams.creator"
+          placeholder="请输入制单人"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="部门编码" prop="deptCode">
+        <el-input
+          v-model="queryParams.deptCode"
+          placeholder="请输入部门编码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="部门" prop="dept">
+        <el-input
+          v-model="queryParams.dept"
+          placeholder="请输入部门"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="目标合计" prop="goalTotal">
+        <el-input
+          v-model="queryParams.goalTotal"
+          placeholder="请输入目标合计"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="notes">
+        <el-input
+          v-model="queryParams.notes"
+          placeholder="请输入备注"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </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="handleAdd"
+          v-hasPermi="['goal_management:annualSaleGoal:add']"
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['goal_management:annualSaleGoal:edit']"
+        >修改
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['goal_management:annualSaleGoal:remove']"
+        >删除
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['goal_management:annualSaleGoal:export']"
+        >导出
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="annualSaleGoalList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="唯一标识" align="center" prop="id"/>
+      <el-table-column label="编码" align="center" prop="code"/>
+      <el-table-column label="年度销售目标名称" align="center" prop="goalName"/>
+      <el-table-column label="单据日期" align="center" prop="documentDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.documentDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="年度" align="center" prop="annual"/>
+      <el-table-column label="客户编码" align="center" prop="customCode"/>
+      <el-table-column label="客户" align="center" prop="custom"/>
+      <el-table-column label="销售区域编码" align="center" prop="saleZoneCode"/>
+      <el-table-column label="销售区域" align="center" prop="saleZone"/>
+      <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="goalTotal"/>
+      <el-table-column label="备注" align="center" prop="notes"/>
+      <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
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['goal_management:annualSaleGoal:edit']"
+          >修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['goal_management:annualSaleGoal:remove']"
+          >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-drawer :title="title" :visible.sync="open" direction="rtl" :before-close="handleClose" size="100%">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="编码" prop="code">
+              <el-input v-model="form.code" placeholder="编码后端自动生成" clearable disabled/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="目标名称" prop="goalName">
+              <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" clearable disabled/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据日期" prop="documentDate">
+              <el-date-picker v-model="form.documentDate" type="date" format="yyyy-MM-dd"
+                              placeholder="选择日期"></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="年度" prop="annual">
+              <el-date-picker v-model="form.annual" type="year" format="yyyy" placeholder="选择年度"></el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item 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-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="销售区域" prop="saleZone">
+              <el-popover-select-v2 v-model="form.saleZone" title="销售区域" valueKey="name"
+                                    referName="CONTACTS_PARAM"
+                                    :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+                                    :source.sync="form" placeholder="请输入销售区域">
+              </el-popover-select-v2>
+            </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" 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="CONTACTS_PARAM"
+                                    :dataMapping="{ deptCode: 'code', dept: 'name'}"
+                                    :source.sync="form" placeholder="请输入部门">
+              </el-popover-select-v2>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="目标合计" prop="goalTotal">
+              <el-input v-model="form.goalTotal" placeholder="目标合计自动计算" clearable disabled/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="备注" prop="notes">
+              <el-input v-model="form.notes" placeholder="请输入备注" clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据状态" prop="documentStatus">
+              <el-input v-model="form.documentStatus" placeholder="编码后端自动生成" clearable disabled/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="操作">
+              <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
+              <el-button @click="cancel" size="medium">返 回</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>
+      <el-table v-loading="loading" :data="annualSaleGoalDetailsList" @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="annualSaleGoalDetailsList[scope.$index].saleOrg" title="销售组织" valueKey="name"
+                                  referName="CUSTOMER_PARAM"
+                                  :dataMapping="{ saleOrgCode: 'code', saleOrg: 'name'}"
+                                  :source.sync="annualSaleGoalDetailsList[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="annualSaleGoalDetailsList[scope.$index].saleZone" title="销售区域" valueKey="name"
+                                  referName="CUSTOMER_PARAM"
+                                  :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+                                  :source.sync="annualSaleGoalDetailsList[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="annualSaleGoalDetailsList[scope.$index].custom" title="客户" valueKey="name"
+                                  referName="CUSTOMER_PARAM"
+                                  :dataMapping="{ customCode: 'code', custom: 'name'}"
+                                  :source.sync="annualSaleGoalDetailsList[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="annualSaleGoalDetailsList[scope.$index].creator" title="负责人" valueKey="name"
+                                  referName="CONTACTS_PARAM"
+                                  :dataMapping="{ creatorCode: 'code', creator: 'name'}"
+                                  :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入负责人">
+            </el-popover-select-v2>
+          </template>
+        </el-table-column>
+        <el-table-column label="一级分类" align="center" prop="oneLevelClassify" width="180">
+          <template slot-scope="scope">
+            <el-input v-model="annualSaleGoalDetailsList[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="annualSaleGoalDetailsList[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="annualSaleGoalDetailsList[scope.$index].material" title="物料" valueKey="name"
+                                  referName="MATERIAL_PARAM"
+                                  :dataMapping="{ materialCode: 'code', material: 'name'}"
+                                  :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入物料">
+            </el-popover-select-v2>
+          </template>
+        </el-table-column>
+        <el-table-column label="合计" align="center" prop="totalGoal" width="180">
+          <template slot-scope="scope">
+            <el-input v-model="annualSaleGoalDetailsList[scope.$index].goalTotal" disabled></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="一月" align="center" prop="januaryGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].januaryGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="二月" align="center" prop="februaryGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].februaryGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="三月" align="center" prop="marchGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].marchGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="四月" align="center" prop="aprilGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].aprilGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="五月" align="center" prop="mayGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].mayGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="六月" align="center" prop="juneGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].juneGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="七月" align="center" prop="julyGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].julyGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="八月" align="center" prop="augustGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].augustGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="九月" align="center" prop="septemberGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].septemberGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="十月" align="center" prop="octoberGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].octoberGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="十一月" align="center" prop="novemberGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].novemberGoal" :precision="6" :step="0.1" :min="0"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="十二月" align="center" prop="decemberGoal" width="220">
+          <template slot-scope="scope">
+            <el-input-number v-model="annualSaleGoalDetailsList[scope.$index].decemberGoal" :precision="6" :step="0.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>
+  </div>
+</template>
+
+<script>
+import {
+  listAnnualSaleGoal,
+  getAnnualSaleGoal,
+  delAnnualSaleGoal,
+  addAnnualSaleGoal,
+  updateAnnualSaleGoal
+} from "@/api/business/spd/goal_management/annualSaleGoal";
+
+// 树形参照
+import TreeRefers from '@/components/Refers/treeRefer.vue'
+import ElPopoverSelectV2 from "@/components/popover-select-v2"
+
+export default {
+  name: "AnnualSaleGoal",
+  components: {
+    TreeRefers, ElPopoverSelectV2
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 年度销售目标表格数据
+      annualSaleGoalList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        code: null,
+        goalName: null,
+        documentDate: null,
+        annual: null,
+        customCode: null,
+        custom: null,
+        saleZoneCode: null,
+        saleZone: null,
+        creatorCode: null,
+        creator: null,
+        deptCode: null,
+        dept: null,
+        goalTotal: null,
+        notes: null,
+        documentStatus: null,
+        deleteStatus: null
+      },
+      // 表单参数
+      form: {
+        id: null,
+        code: null,
+        goalName: null,
+        documentDate: null,
+        annual: null,
+        customCode: null,
+        custom: null,
+        saleZoneCode: null,
+        saleZone: null,
+        creatorCode: null,
+        creator: null,
+        deptCode: null,
+        dept: null,
+        goalTotal: null,
+        notes: null,
+        documentStatus: '开立态',
+        deleteStatus: 0
+      },
+      formDetails: {
+        id: null,
+        code: null,
+        saleOrg: null,
+        saleZone: null,
+        custom: null,
+        creator: null,
+        oneLevelClassifyCode: null,
+        oneLevelClassify: null,
+        twoLevelClassifyCode: null,
+        twoLevelClassify: null,
+        materialCode: null,
+        material: null,
+        totalGoal: null,
+        januaryGoal: null,
+        februaryGoal: null,
+        marchGoal: null,
+        aprilGoal: null,
+        mayGoal: null,
+        juneGoal: null,
+        julyGoal: null,
+        augustGoal: null,
+        septemberGoal: null,
+        octoberGoal: null,
+        novemberGoal: null,
+        decemberGoal: null
+      },
+      // 表单校验
+      rules: {
+        documentDate: [{required: true, message: '单据日期不能为空', trigger: 'blur'}],
+        annual: [{required: true, message: '年度不能为空', trigger: 'blur'}],
+        custom: [{required: true, message: '客户不能为空', trigger: 'blur'}],
+        saleZone: [{required: true, message: '销售区域不能为空', trigger: 'blur'}],
+        creator: [{required: true, message: '制单人不能为空', trigger: 'blur'}],
+        dept: [{required: true, message: '部门不能为空', trigger: 'blur'}]
+      },
+      // 参照条件
+      referCondition: {type: '', isPage: true, title: ''},
+      classList: [],
+      // 子表数组
+      annualSaleGoalDetailsList: []
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询年度销售目标列表 */
+    getList() {
+      this.loading = true;
+      listAnnualSaleGoal(this.queryParams).then(response => {
+        this.annualSaleGoalList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        code: null,
+        goalName: null,
+        documentDate: null,
+        annual: null,
+        customCode: null,
+        custom: null,
+        saleZoneCode: null,
+        saleZone: null,
+        creatorCode: null,
+        creator: null,
+        deptCode: null,
+        dept: null,
+        goalTotal: null,
+        notes: null,
+        documentStatus: null,
+        deleteStatus: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加年度销售目标";
+      this.annualSaleGoalDetailsList = []
+    },
+    handleAddDetails() {
+      let list = {
+        id: null,
+        code: null,
+        saleOrg: null,
+        saleZone: null,
+        custom: null,
+        creator: null,
+        oneLevelClassifyCode: null,
+        oneLevelClassify: null,
+        twoLevelClassifyCode: null,
+        twoLevelClassify: null,
+        materialCode: null,
+        material: null,
+        totalGoal: null,
+        januaryGoal: null,
+        februaryGoal: null,
+        marchGoal: null,
+        aprilGoal: null,
+        mayGoal: null,
+        juneGoal: null,
+        julyGoal: null,
+        augustGoal: null,
+        septemberGoal: null,
+        octoberGoal: null,
+        novemberGoal: null,
+        decemberGoal: null
+      }
+      this.annualSaleGoalDetailsList.push(list)
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getAnnualSaleGoal(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改年度销售目标";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateAnnualSaleGoal(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addAnnualSaleGoal(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除年度销售目标编号为"' + ids + '"的数据项？').then(function () {
+        return delAnnualSaleGoal(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    handleDeleteDetails(index, row) {
+      console.log(index);
+      console.log(row);
+      this.annualSaleGoalDetailsList.splice(index, 1)
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('goal_management/annualSaleGoal/export', {
+        ...this.queryParams
+      }, `annualSaleGoal_${new Date().getTime()}.xlsx`)
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+          this.reset()
+        })
+        .catch(_ => {
+        });
+    },
+    // 复制明细
+    handleCopyDetails(row) {
+      let list = {
+        id: row.id,
+        code: row.code,
+        saleOrg: row.saleOrg,
+        saleZone: row.saleZone,
+        custom: row.custom,
+        creator: row.creator,
+        oneLevelClassifyCode: row.oneLevelClassifyCode,
+        oneLevelClassify: row.oneLevelClassify,
+        twoLevelClassifyCode: row.oneLevelClassifyCode,
+        twoLevelClassify: row.twoLevelClassify,
+        materialCode: row.materialCode,
+        material: row.material,
+        totalGoal: row.goalTotal,
+        januaryGoal: row.januaryGoal,
+        februaryGoal: row.februaryGoal,
+        marchGoal: row.marchGoal,
+        aprilGoal: row.aprilGoal,
+        mayGoal: row.mayGoal,
+        juneGoal: row.juneGoal,
+        julyGoal: row.julyGoal,
+        augustGoal: row.augustGoal,
+        septemberGoal: row.septemberGoal,
+        octoberGoal: row.octoberGoal,
+        novemberGoal: row.novemberGoal,
+        decemberGoal: row.decemberGoal
+      }
+      this.annualSaleGoalDetailsList.push(list)
+      console.log(this.annualSaleGoalDetailsList);
+    }
+  }
+};
+</script>

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

@@ -28,7 +28,6 @@
           end-placeholder="结束日期"
           :picker-options="pickerOptions"
           value-format="yyyy-MM-dd"
-          @change="lookValue"
           @keyup.enter.native="handleQuery">
         </el-date-picker>
       </el-form-item>
@@ -78,9 +77,6 @@
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['goal_management:annualSaleGoal:add']">新增</el-button>
       </el-col>
-<!--      <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['goal_management:annualSaleGoal:edit']">修改</el-button>
-      </el-col>-->
       <el-col :span="1.5">
         <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['goal_management:annualSaleGoal:remove']">删除</el-button>
       </el-col>
@@ -127,17 +123,9 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['goal_management:annualSaleGoal:remove']"
           >删除</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleLook(scope.row.id)"
-            v-hasPermi="['goal_management:annualSaleGoal:query']"
-          >查看</el-button>
         </template>
       </el-table-column>
     </el-table>
-
     <pagination
       v-show="total>0"
       :total="total"
@@ -146,462 +134,144 @@
       @pagination="getList"
     />
 
-    <el-drawer title="年度销售目标填报--新增" :visible.sync="drawerAdd" :direction="direction" :before-close="handleClose" size="100%">
-      <el-form :rules="rules" :model="form" ref="form" size="small" :inline="true" v-show="showSearch" label-width="110px">
-        <el-form-item label="编码" prop="code">
-          <el-input v-model="form.code" placeholder="编码后端自动生成" disabled />
-        </el-form-item>
-        <el-form-item label="目标名称" prop="goalName" style="margin-left: 44px">
-          <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" disabled />
-        </el-form-item>
-        <el-form-item label="单据日期" prop="documentDate" style="margin-left: 46px">
-          <el-date-picker clearable
-                          v-model="form.documentDate"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择单据日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="年度" prop="annual" style="margin-left: 17px">
-          <el-select v-model="form.annual" filterable placeholder="请选择年度">
-            <el-option
-              v-for="item in annualList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="客户" prop="custom">
-          <dr-popover-select v-model="form.custom" title="客户" type="CUSTOMER_PARAM" :dataMapping="{
-            customCode: 'code',
-            custom: 'name',
-          }" :source.sync="form"></dr-popover-select>
-        </el-form-item>
-        <el-form-item label="销售区域" prop="saleZone">
-          <dr-popover-select v-model="form.saleZone" title="销售区域" type="ORG_PARAM" :dataMapping="{
-            saleZoneCode: 'code',
-            saleZone: 'name',
-          }" :source.sync="form"></dr-popover-select>
-        </el-form-item>
-        <el-form-item label="制单人" prop="creator">
-          <dr-popover-select v-model="form.creator" title="制单人" type="CONTACTS_PARAM" :dataMapping="{
-            creatorCode: 'code',
-            creator: 'name',
-          }" :source.sync="form"></dr-popover-select>
-        </el-form-item>
-        <el-form-item label="部门" prop="dept">
-          <dr-popover-select v-model="form.dept" title="部门" type="DEPT_PARAM" :dataMapping="{
-            deptCode: 'code',
-            dept: 'name',
-          }" :source.sync="form"></dr-popover-select>
-        </el-form-item>
-        <el-form-item label="目标合计" prop="goalTotal">
-          <el-input v-model="form.goalTotal" placeholder="请输入目标合计" disabled />
-        </el-form-item>
-        <el-form-item label="备注" prop="notes" style="margin-left: 46px">
-          <el-input v-model="form.notes" placeholder="请输入备注" />
-        </el-form-item>
-        <el-form-item label="单据状态" prop="documentStatus" style="margin-left: 46px">
-          <el-input v-model="form.documentStatus" placeholder="请输入单据状态" disabled />
-        </el-form-item>
-        <el-form-item style="margin-left: 115px">
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="addOrEdit">新增</el-button>
-        </el-form-item>
-      </el-form>
-    </el-drawer>
-
-    <el-drawer title="年度销售目标填报--修改" :visible.sync="drawEdit" :direction="direction" :before-close="handleClose" size="100%">
-      <el-form :rules="rules" :model="form" ref="form" size="small" :inline="true" v-show="showSearch" label-width="110px">
-        <el-form-item label="编码" prop="code">
-          <el-input v-model="form.code" placeholder="编码后端自动生成" disabled />
-        </el-form-item>
-        <el-form-item label="目标名称" prop="goalName" style="margin-left: 44px">
-          <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" disabled />
-        </el-form-item>
-        <el-form-item label="单据日期" prop="documentDate" style="margin-left: 46px">
-          <el-date-picker clearable
-                          v-model="form.documentDate"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择单据日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="年度" prop="annual" style="margin-left: 17px">
-          <el-select v-model="form.annual" filterable placeholder="请选择年度">
-            <el-option
-              v-for="item in annualList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="客户" prop="custom">
-          <dr-popover-select v-model="form.custom" title="客户" type="CUSTOMER_PARAM" :dataMapping="{
-            customCode: 'code',
-            custom: 'name',
-          }" :source.sync="form"></dr-popover-select>
-        </el-form-item>
-        <el-form-item label="销售组织" prop="saleZone">
-          <dr-popover-select v-model="form.saleZone" title="销售组织" type="ORG_PARAM" :dataMapping="{
-            saleZoneCode: 'code',
-            saleZone: 'name',
-          }" :source.sync="form"></dr-popover-select>
-        </el-form-item>
-        <el-form-item label="制单人" prop="creator">
-          <dr-popover-select v-model="form.creator" title="制单人" type="CONTACTS_PARAM" :dataMapping="{
-            creatorCode: 'code',
-            creator: 'name',
-          }" :source.sync="form"></dr-popover-select>
-        </el-form-item>
-        <el-form-item label="部门" prop="dept">
-          <dr-popover-select v-model="form.dept" title="部门" type="DEPT_PARAM" :dataMapping="{
-            deptCode: 'code',
-            dept: 'name',
-          }" :source.sync="form"></dr-popover-select>
-        </el-form-item>
-        <el-form-item label="目标合计" prop="goalTotal">
-          <el-input v-model="form.goalTotal" placeholder="请输入目标合计" disabled />
-        </el-form-item>
-        <el-form-item label="备注" prop="notes" style="margin-left: 46px">
-          <el-input v-model="form.notes" placeholder="请输入备注" />
-        </el-form-item>
-        <el-form-item label="单据状态" prop="documentStatus" style="margin-left: 46px">
-          <el-input v-model="form.documentStatus" placeholder="请输入单据状态" disabled />
-        </el-form-item>
-        <el-form-item style="margin-left: 115px">
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="addOrEdit">修改</el-button>
-        </el-form-item>
-      </el-form>
-      <el-row :gutter="10" class="mb8" type="flex" justify="end">
-        <el-col :span="1.5" style="margin-right: 73%"><span>年度销售目标填报</span></el-col>
-        <el-col :span="1.5">
-          <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="openDetailsDrawer"
-            v-hasPermi="['goal_management:annualSaleGoalDetails:add']"
-          >新增</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDetailsDelete"
-            v-hasPermi="['goal_management:annualSaleGoalDetails:remove']"
-          >删除</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button
-            disabled
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['goal_management:annualSaleGoalDetails:export']"
-          >导出</el-button>
-        </el-col>
-        <!--        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
-      </el-row>
-
-      <el-table size="small" v-loading="loading" :data="annualSaleGoalDetailsList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" fixed />
-        <el-table-column label="id唯一标识" align="center" prop="id" />
-        <el-table-column label="编码" align="center" prop="code" />
-        <el-table-column label="销售组织" align="center" prop="saleOrg" />
-        <el-table-column label="销售区域" align="center" prop="saleZone" />
-        <el-table-column label="客户" align="center" prop="custom" />
-        <el-table-column label="负责人" align="center" prop="creator" />
-        <el-table-column label="一级分类编码" align="center" prop="oneLevelClassifyCode" />
-        <el-table-column label="一级分类" align="center" prop="oneLevelClassify" />
-        <el-table-column label="二级分类编码" align="center" prop="twoLevelClassifyCode" />
-        <el-table-column label="二级分类编码" align="center" prop="twoLevelClassify" />
-        <el-table-column label="物料编码" align="center" prop="materialCode" />
-        <el-table-column label="物料" align="center" prop="material" />
-        <el-table-column label="总计" align="center" prop="totalGoal" />
-        <el-table-column label="一月目标" align="center" prop="januaryGoal" />
-        <el-table-column label="二月目标" align="center" prop="februaryGoal" />
-        <el-table-column label="三月目标" align="center" prop="marchGoal" />
-        <el-table-column label="四月目标" align="center" prop="aprilGoal" />
-        <el-table-column label="五月目标" align="center" prop="mayGoal" />
-        <el-table-column label="六月目标" align="center" prop="juneGoal" />
-        <el-table-column label="七月目标" align="center" prop="julyGoal" />
-        <el-table-column label="八月目标" align="center" prop="augustGoal" />
-        <el-table-column label="九月目标" align="center" prop="septemberGoal" />
-        <el-table-column label="十月目标" align="center" prop="octoberGoal" />
-        <el-table-column label="十一月目标" align="center" prop="novemberGoal" />
-        <el-table-column label="十二月目标" align="center" prop="decemberGoal" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdateDetails(scope.row)"
-              v-hasPermi="['goal_management:annualSaleGoalDetails:edit']"
-            >修改</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDetailsDelete(scope.row)"
-              v-hasPermi="['goal_management:annualSaleGoalDetails:remove']"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-show="totalDetails>0"
-        :total="totalDetails"
-        :page.sync="queryDetailsParams.pageNum"
-        :limit.sync="queryDetailsParams.pageSize"
-        @pagination="getDetailList"
-      />
-
-      <el-drawer
-        title="年度销售目标细节"
-        :visible.sync="drawerDetails"
-        :direction="direction"
-        :append-to-body="true"
-        :before-close="handleCloseDetails">
-        <el-form ref="formDetails" :model="formDetails" :rules="ruleDetails" label-width="120px">
-          <el-form-item label="主表编码" prop="code">
-            <el-input v-model="formDetails.code" placeholder="请输入编码" disabled />
-          </el-form-item>
-          <el-form-item label="销售组织" prop="saleOrg">
-            <dr-popover-select
-              v-model="formDetails.saleOrg"
-              title="销售组织"
-              type="ORG_PARAM" :dataMapping="{ saleOrg: 'name' }" :source.sync="formDetails">
-            </dr-popover-select>
-          </el-form-item>
-          <el-form-item label="销售区域" prop="saleZone">
-            <dr-popover-select
-              v-model="formDetails.saleZone"
-              title="销售区域"
-              type="ORG_PARAM" :dataMapping="{ saleZone: 'name' }" :source.sync="formDetails">
-            </dr-popover-select>
-          </el-form-item>
-          <el-form-item label="客户" prop="custom">
-            <dr-popover-select
-              v-model="formDetails.custom"
-              title="客户"
-              type="CUSTOMER_PARAM" :dataMapping="{ custom: 'name' }" :source.sync="formDetails">
-            </dr-popover-select>
-          </el-form-item>
-          <el-form-item label="负责人" prop="creator">
-            <dr-popover-select
-              v-model="formDetails.creator"
-              title="负责人"
-              type="CONTACTS_PARAM" :dataMapping="{ creator: 'name' }" :source.sync="formDetails">
-            </dr-popover-select>
-          </el-form-item>
-          <el-form-item label="一级分类编码" prop="oneLevelClassifyCode">
-            <el-input v-model="formDetails.oneLevelClassifyCode" placeholder="请输入一级分类编码" disabled />
-          </el-form-item>
-          <el-form-item label="一级分类" prop="oneLevelClassify">
-            <el-select
-              v-model="formDetails.oneLevelClassify" clearable placeholder="请输入一级分类"
-              @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '一级物料分类')"
-              @change="changeDetailsCode" style="width: 100%"
-            >
-              <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="二级分类编码" prop="twoLevelClassifyCode">
-            <el-input v-model="formDetails.twoLevelClassifyCode" placeholder="请输入二级分类编码" disabled />
-          </el-form-item>
-          <el-form-item label="二级分类编码" prop="twoLevelClassify">
-            <el-select v-model="formDetails.twoLevelClassify" placeholder="请输入二级分类编码" clearable
-              @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '二级物料分类')"
-              @change="changeDetailsCode" style="width: 100%"
-            >
-              <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="物料" prop="material">
-            <dr-popover-select
-              v-model="formDetails.material"
-              title="物料"
-              placeholder="请输入物料"
-              type="MATERIAL_PARAM" :dataMapping="{ material: 'name', materialCode: 'code' }"
-              :source.sync="formDetails">
-            </dr-popover-select>
-          </el-form-item>
-          <el-form-item label="一月目标" prop="januaryGoal">
-            <el-input v-model="formDetails.januaryGoal" placeholder="请输入一月目标" />
-          </el-form-item>
-          <el-form-item label="二月目标" prop="februaryGoal">
-            <el-input v-model="formDetails.februaryGoal" placeholder="请输入二月目标" />
-          </el-form-item>
-          <el-form-item label="三月目标" prop="marchGoal">
-            <el-input v-model="formDetails.marchGoal" placeholder="请输入三月目标" />
-          </el-form-item>
-          <el-form-item label="四月目标" prop="aprilGoal">
-            <el-input v-model="formDetails.aprilGoal" placeholder="请输入四月目标" />
-          </el-form-item>
-          <el-form-item label="五月目标" prop="mayGoal">
-            <el-input v-model="formDetails.mayGoal" placeholder="请输入五月目标" />
-          </el-form-item>
-          <el-form-item label="六月目标" prop="juneGoal">
-            <el-input v-model="formDetails.juneGoal" placeholder="请输入六月目标" />
-          </el-form-item>
-          <el-form-item label="七月目标" prop="julyGoal">
-            <el-input v-model="formDetails.julyGoal" placeholder="请输入七月目标" />
-          </el-form-item>
-          <el-form-item label="八月目标" prop="augustGoal">
-            <el-input v-model="formDetails.augustGoal" placeholder="请输入八月目标" />
-          </el-form-item>
-          <el-form-item label="九月目标" prop="septemberGoal">
-            <el-input v-model="formDetails.septemberGoal" placeholder="请输入九月目标" />
-          </el-form-item>
-          <el-form-item label="十月目标" prop="octoberGoal">
-            <el-input v-model="formDetails.octoberGoal" placeholder="请输入十月目标" />
-          </el-form-item>
-          <el-form-item label="十一月目标" prop="novemberGoal">
-            <el-input v-model="formDetails.novemberGoal" placeholder="请输入十一月目标" />
-          </el-form-item>
-          <el-form-item label="十二月目标" prop="decemberGoal">
-            <el-input v-model="formDetails.decemberGoal" placeholder="请输入十二月目标" />
-          </el-form-item>
-          <el-form-item style="margin-left: 140px">
-            <el-button type="primary" @click="submitFormDetails">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-          </el-form-item>
-        </el-form>
-      </el-drawer>
-    </el-drawer>
-
-    <el-drawer title="年度销售目标填报--详情" :visible.sync="drawLook" :direction="direction" :before-close="handleClose" size="100%">
-      <el-form :model="form" size="small" :inline="true" v-show="showSearch" label-width="120px">
-        <el-row :gutter="10">
-          <el-col :span="1.5">
+    <el-drawer :title="title" :visible.sync="drawerAddAndEdit" :direction="direction" :before-close="handleClose" size="100%">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <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="编码后端自动生成" clearable disabled />
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
+          <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="目标名称后端自动生成" clearable disabled />
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
+          <el-col :span="6">
             <el-form-item label="单据日期" prop="documentDate">
-              <el-date-picker clearable disabled
-                              v-model="form.documentDate"
-                              type="date"
-                              value-format="yyyy-MM-dd"
-                              placeholder="请选择单据日期">
-              </el-date-picker>
+              <el-date-picker v-model="form.documentDate" type="date" format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
+          <el-col :span="6">
             <el-form-item label="年度" prop="annual">
-              <el-select v-model="form.annual" filterable placeholder="请选择年度" disabled>
-                <el-option
-                  v-for="item in annualList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+              <el-date-picker v-model="form.annual" type="year" format="yyyy" placeholder="选择年度"></el-date-picker>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="10">
-          <el-col :span="1.5">
+        <el-row :gutter="20">
+          <el-col :span="6">
             <el-form-item label="客户" prop="custom">
-              <dr-popover-select disabled v-model="form.custom" title="客户" type="CUSTOMER_PARAM" :dataMapping="{
-            customCode: 'code',
-            custom: 'name',
-          }" :source.sync="form"></dr-popover-select>
+              <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-col>
-          <el-col :span="1.5">
-            <el-form-item label="销售组织" prop="saleZone" style="margin-left: -45px">
-              <dr-popover-select disabled v-model="form.saleZone" title="销售组织" type="ORG_PARAM" :dataMapping="{
-            saleZoneCode: 'code',
-            saleZone: 'name',
-          }" :source.sync="form"></dr-popover-select>
+          <el-col :span="6">
+            <el-form-item label="销售区域" prop="saleZone">
+              <el-popover-select-v2 v-model="form.saleZone" title="销售区域" valueKey="name"
+                                    referName="CONTACTS_PARAM"
+                                    :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+                                    :source.sync="form" placeholder="请输入销售区域">
+              </el-popover-select-v2>
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="制单人" prop="creator" style="margin-left: -45px">
-              <dr-popover-select disabled v-model="form.creator" title="制单人" type="CONTACTS_PARAM" :dataMapping="{
-            creatorCode: 'code',
-            creator: 'name',
-          }" :source.sync="form"></dr-popover-select>
+          <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" placeholder="请输入制单人">
+              </el-popover-select-v2>
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="部门" prop="dept" style="margin-left: -15px">
-              <dr-popover-select disabled v-model="form.dept" title="部门" type="DEPT_PARAM" :dataMapping="{
-            deptCode: 'code',
-            dept: 'name',
-          }" :source.sync="form"></dr-popover-select>
+          <el-col :span="6">
+            <el-form-item label="部门" prop="dept">
+              <el-popover-select-v2 v-model="form.dept" title="部门" valueKey="name"
+                                    referName="CONTACTS_PARAM"
+                                    :dataMapping="{ deptCode: 'code', dept: 'name'}"
+                                    :source.sync="form" placeholder="请输入部门">
+              </el-popover-select-v2>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="10">
-          <el-col :span="1.5">
+        <el-row :gutter="20">
+          <el-col :span="6">
             <el-form-item label="目标合计" prop="goalTotal">
-              <el-input disabled v-model="form.goalTotal" placeholder="请输入目标合计" disabled />
+              <el-input v-model="form.goalTotal" placeholder="目标合计自动计算" clearable disabled />
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
+          <el-col :span="6">
             <el-form-item label="备注" prop="notes">
-              <el-input disabled v-model="form.notes" placeholder="请输入备注" />
+              <el-input v-model="form.notes" placeholder="请输入备注" clearable />
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
+          <el-col :span="6">
             <el-form-item label="单据状态" prop="documentStatus">
-              <el-input disabled v-model="form.documentStatus" placeholder="请输入单据状态" disabled />
+              <el-input v-model="form.documentStatus" placeholder="编码后端自动生成" clearable disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="操作">
+              <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
+              <el-button @click="cancel" size="medium">返 回</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-col :span="1.5">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">删行</el-button>
+        </el-col>
+      </el-row>
       <el-table v-loading="loading" :data="annualSaleGoalDetailsList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" fixed />
-        <el-table-column label="id唯一标识" align="center" prop="id" />
-        <el-table-column label="编码" align="center" prop="code" />
-        <el-table-column label="销售组织" align="center" prop="saleOrg" />
+        <el-table-column label="编号" align="center" type="index" ></el-table-column>
+        <el-table-column label="编码" align="center" prop="code" width="180" />
+        <el-table-column label="销售组织" align="center" prop="saleOrg" width="180" />
         <el-table-column label="销售区域" align="center" prop="saleZone" />
-        <el-table-column label="客户" align="center" prop="custom" />
-        <el-table-column label="负责人" align="center" prop="creator" />
-        <el-table-column label="一级分类编码" align="center" prop="oneLevelClassifyCode" />
+        <el-table-column label="客户" align="center" prop="custom" width="180" />
+        <el-table-column label="负责人" align="center" prop="creator" width="180" />
         <el-table-column label="一级分类" align="center" prop="oneLevelClassify" />
-        <el-table-column label="二级分类编码" align="center" prop="twoLevelClassifyCode" />
-        <el-table-column label="二级分类编码" align="center" prop="twoLevelClassify" />
-        <el-table-column label="物料编码" align="center" prop="materialCode" />
+        <el-table-column label="二级分类" align="center" prop="twoLevelClassify" width="180" />
         <el-table-column label="物料" align="center" prop="material" />
-        <el-table-column label="一月目标" align="center" prop="januaryGoal" />
-        <el-table-column label="二月目标" align="center" prop="februaryGoal" />
-        <el-table-column label="三月目标" align="center" prop="marchGoal" />
-        <el-table-column label="四月目标" align="center" prop="aprilGoal" />
-        <el-table-column label="五月目标" align="center" prop="mayGoal" />
-        <el-table-column label="六月目标" align="center" prop="juneGoal" />
-        <el-table-column label="七月目标" align="center" prop="julyGoal" />
-        <el-table-column label="八月目标" align="center" prop="augustGoal" />
-        <el-table-column label="九月目标" align="center" prop="septemberGoal" />
-        <el-table-column label="十月目标" align="center" prop="octoberGoal" />
-        <el-table-column label="十一月目标" align="center" prop="novemberGoal" />
-        <el-table-column label="十二月目标" align="center" prop="decemberGoal" />
+        <el-table-column label="合计" align="center" prop="totalGoal" width="180" />
+        <el-table-column label="一月" align="center" prop="januaryGoal" />
+        <el-table-column label="二月" align="center" prop="februaryGoal"></el-table-column>
+        <el-table-column label="三月" align="center" prop="marchGoal" width="180"></el-table-column>
+        <el-table-column label="四月" align="center" prop="aprilGoal"></el-table-column>
+        <el-table-column label="五月" align="center" prop="mayGoal" width="180"></el-table-column>
+        <el-table-column label="六月" align="center" prop="juneGoal" width="180"></el-table-column>
+        <el-table-column label="七月" align="center" prop="julyGoal" width="180"></el-table-column>
+        <el-table-column label="八月" align="center" prop="augustGoal" width="180"></el-table-column>
+        <el-table-column label="九月" align="center" prop="septemberGoal" width="180"></el-table-column>
+        <el-table-column label="十月" align="center" prop="octoberGoal" width="180"></el-table-column>
+        <el-table-column label="十一月" align="center" prop="novemberGoal" width="180"></el-table-column>
+        <el-table-column label="十二月" align="center" prop="decemberGoal" width="180"></el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px" fixed="right">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdateDetails(scope.row)"
+              v-hasPermi="['goal_management:annualSaleGoal:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['goal_management:annualSaleGoal:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
       </el-table>
-      <pagination
-        v-show="totalDetails>0"
-        :total="totalDetails"
-        :page.sync="queryDetailsParams.pageNum"
-        :limit.sync="queryDetailsParams.pageSize"
-        @pagination="getDetailList"
-      />
     </el-drawer>
 
     <TreeRefers ref="tree" :single="true" @doSubmit="selectionsToTreeInput"></TreeRefers>
@@ -613,19 +283,16 @@
 import { listAnnualSaleGoal, getAnnualSaleGoal, delAnnualSaleGoal, addAnnualSaleGoal, updateAnnualSaleGoal } from "@/api/business/spd/goal_management/annualSaleGoal";
 // 年度目标填报明细
 import {
-  getAnnualSaleGoalDetails,
-  delAnnualSaleGoalDetails,
-  addAnnualSaleGoalDetails,
-  updateAnnualSaleGoalDetails,
-  getDetailsByCode
+
 } from "@/api/business/spd/goal_management/annualSaleGoalDetails";
 // 树形参照
 import TreeRefers from '@/components/Refers/treeRefer.vue'
+import ElPopoverSelectV2 from "@/components/popover-select-v2"
 
 export default {
   name: "AnnualSaleGoal",
   components: {
-    TreeRefers
+    TreeRefers, ElPopoverSelectV2
   },
   data() {
     return {
@@ -644,7 +311,8 @@ export default {
       // 年度销售目标表格数据
       annualSaleGoalList: [],
       // 弹出层标题
-      title: "年度销售目标明细",
+      title: '',
+      titleDetails: '',
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -689,7 +357,7 @@ export default {
         creator: null,
         deptCode: null,
         dept: null,
-        goalTotal: 0,
+        goalTotal: null,
         notes: null,
         documentStatus: '开立态',
         deleteStatus: 0,
@@ -711,6 +379,7 @@ export default {
         twoLevelClassify: null,
         materialCode: null,
         material: null,
+        totalGoal: null,
         januaryGoal: null,
         februaryGoal: null,
         marchGoal: null,
@@ -743,13 +412,7 @@ export default {
         material: [{ required: true, message: '销售组织不能为空', trigger: 'blur' }]
       },
       // 添加抽屉
-      drawerAdd: false,
-      // 修改抽屉
-      drawEdit: false,
-      // 查看抽屉
-      drawLook: false,
-      // 细节抽屉
-      drawerDetails: false,
+      drawerAddAndEdit: false,
       // 抽屉打开方向
       direction: 'rtl',
       // 年度列表
@@ -847,10 +510,14 @@ export default {
         creator: null,
         deptCode: null,
         dept: null,
-        goalTotal: 0,
+        goalTotal: null,
         notes: null,
         documentStatus: '开立态',
-        deleteStatus: 0
+        deleteStatus: 0,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
       };
       this.resetForm("form");
     },
@@ -868,6 +535,7 @@ export default {
         twoLevelClassify: null,
         materialCode: null,
         material: null,
+        totalGoal: null,
         januaryGoal: null,
         februaryGoal: null,
         marchGoal: null,
@@ -880,8 +548,8 @@ export default {
         octoberGoal: null,
         novemberGoal: null,
         decemberGoal: null
-      };
-      this.resetForm("formDetails");
+      }
+      this.resetForm("formDetails")
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -902,7 +570,13 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()
-      this.drawerAdd = true
+      this.title = '年销售目标新增'
+      this.annualSaleGoalDetailsList = []
+      this.drawerAddAndEdit = true
+    },
+    handleAddDetails() {
+      this.titleDetails = '年销售目标明细新增'
+      this.drawerInner = !this.drawerInner
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -911,16 +585,11 @@ export default {
       getAnnualSaleGoal(id).then(response => {
         this.form = response.data
         this.drawEdit = true
-        this.getDetailList()
+        // this.getDetailList()
       });
     },
     handleUpdateDetails(row) {
-      this.resetDetails()
-      const id = row.id || this.ids
-      getAnnualSaleGoalDetails(id).then(response => {
-        this.formDetails = response.data
-        this.drawerDetails = true
-      })
+      console.log(row);
     },
     /** 提交按钮 */
     submitForm() {
@@ -929,45 +598,32 @@ export default {
           if (this.form.id != null) {
             updateAnnualSaleGoal(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
-              this.drawEdit = false;
+              this.drawerAddAndEdit = false;
               this.getList();
             });
           } else {
             addAnnualSaleGoal(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
-              this.drawerAdd = false;
+              this.drawerAddAndEdit = false;
               this.getList();
             });
           }
         }
       });
     },
-    addOrEdit() {
-      console.log(this.form);
-      this.submitForm()
-    },
     submitFormDetails() {
-      console.log(this.formDetails);
       this.$refs["formDetails"].validate(valid => {
         if (valid) {
           if (this.formDetails.id != null) {
-            updateAnnualSaleGoalDetails(this.formDetails).then(response => {
+            updateAnnualSaleGoal(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
-              this.drawerDetails = false;
-              this.getDetailList()
-              getAnnualSaleGoal(this.form.id).then(response => {
-                this.form = response.data
-              })
+              this.drawerInner = false;
             });
           } else {
-            addAnnualSaleGoalDetails(this.formDetails).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.drawerDetails = false;
-              this.getDetailList()
-              getAnnualSaleGoal(this.form.id).then(response => {
-                this.form = response.data
-              })
-            });
+            const formDetails = this.formDetails
+            this.annualSaleGoalDetailsList.push(formDetails)
+            console.log(this.annualSaleGoalDetailsList);
+            this.drawerInner = false
           }
         }
       });
@@ -982,19 +638,6 @@ export default {
         this.$modal.msgSuccess("删除成功");
       }).catch(() => {});
     },
-    handleDetailsDelete(row) {
-      const ids = row.id || this.ids
-      const code = this.form.code
-      this.$modal.confirm('是否确认删除年度销售目标编号为"' + ids + '"的数据项？').then(function () {
-        return delAnnualSaleGoalDetails(ids, code)
-      }).then(() => {
-        getAnnualSaleGoal(this.form.id).then(response => {
-          this.form = response.data
-        })
-        this.getDetailList()
-        this.$modal.msgSuccess('删除成功')
-      }).catch(() => {})
-    },
     /** 导出按钮操作 */
     handleExport() {
       this.download('goal_management/annualSaleGoal/export', {
@@ -1013,27 +656,8 @@ export default {
       this.$confirm('确认关闭？').then(_ => {
         done();
         this.resetDetails()
-        this.getList()
       }).catch(_ => {})
     },
-    /** 查看时间范围，范围是个数组*/
-    lookValue() {
-      console.log(this.documentDateRange);
-      console.log(this.queryParams);
-    },
-    // 打开明细新增or编辑界面
-    openDetailsDrawer() {
-      this.resetDetails()
-
-      this.formDetails.code = this.form.code
-      this.formDetails.saleZone = this.form.saleZone
-      this.formDetails.custom = this.form.custom
-      this.formDetails.creator = this.form.creator
-      this.formDetails.saleOrg = '湖南德荣医疗健康产业有限公司'
-
-      this.getDetailList()
-      this.drawerDetails = true
-    },
     // 选择树形参照
     chooseTreeRefer(type, isPage, title) {
       this.referCondition.type = type
@@ -1076,25 +700,6 @@ export default {
       if (two.length === 0 || two === '') {
         this.formDetails.twoLevelClassifyCode = null
       }
-    },
-    // 得到明细数据
-    getDetailList() {
-      this.loading = true
-      this.queryDetailsParams.code = this.form.code
-      getDetailsByCode(this.queryDetailsParams).then(response => {
-        this.annualSaleGoalDetailsList = response.rows
-        this.totalDetails = response.total
-        this.loading = false
-        console.log(this.annualSaleGoalDetailsList);
-      })
-    },
-    handleLook(id) {
-      this.resetDetails()
-      getAnnualSaleGoal(id).then(response => {
-        this.form = response.data
-        this.drawLook = !this.drawLook
-        this.getDetailList()
-      })
     }
   }
 };