lizhuo submits AnnualSaleGoal at 2023-7-5 16:00

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

@@ -9,7 +9,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="年度销售目标名称" prop="goalName">
+      <el-form-item label="目标名称" prop="goalName">
         <el-input
           v-model="queryParams.goalName"
           placeholder="请输入年度销售目标名称"
@@ -17,12 +17,24 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="单据日期" prop="documentDate">
-        <el-date-picker clearable
+      <el-form-item label="单据日期" prop="documentDateRange">
+<!--        <el-date-picker clearable
           v-model="queryParams.documentDate"
           type="date"
           value-format="yyyy-MM-dd"
           placeholder="请选择单据日期">
+        </el-date-picker>-->
+        <el-date-picker
+          v-model="queryParams.documentDateRange"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          value-format="yyyy-MM-dd"
+          @change="lookValue">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="年度" prop="annual">
@@ -73,74 +85,42 @@
 
     <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-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-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-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-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 type="selection" width="55" align="center" fixed />
+      <el-table-column label="编码" align="center" prop="code" width="180" />
+      <el-table-column label="目标名称" align="center" prop="goalName" width="180" />
       <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="custom" width="180" />
+      <el-table-column label="销售区域" align="center" prop="saleZone" width="180" />
       <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="dept" width="180" />
       <el-table-column label="目标合计" align="center" prop="goalTotal" />
-      <el-table-column label="备注" align="center" prop="notes" />
+      <el-table-column label="备注" align="center" prop="notes" width="180" />
       <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">
+      <el-table-column label="创建人" align="center" prop="createBy"></el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180"></el-table-column>
+      <el-table-column label="修改人" align="center" prop="updateBy"></el-table-column>
+      <el-table-column label="修改时间" align="center" prop="updateTime" width="180"></el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px" fixed="right">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -168,62 +148,135 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改年度销售目标对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <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="请输入编码" />
+          <el-input v-model="form.code" placeholder="编码后端自动生成" disabled />
         </el-form-item>
-        <el-form-item label="年度销售目标名称" prop="goalName">
-          <el-input v-model="form.goalName" placeholder="请输入年度销售目标名称" />
+        <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">
+        <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="请选择单据日期">
+                          v-model="form.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="form.annual" placeholder="请输入年度" />
-        </el-form-item>
-        <el-form-item label="客户编码" prop="customCode">
-          <el-input v-model="form.customCode" placeholder="请输入客户编码" />
+        <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">
-          <el-input v-model="form.custom" placeholder="请输入客户" />
+          <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="saleZoneCode">
-          <el-input v-model="form.saleZoneCode" placeholder="请输入销售区域编码" />
+        <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="saleZone">
-          <el-input v-model="form.saleZone" placeholder="请输入销售区域" />
+        <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="creatorCode">
-          <el-input v-model="form.creatorCode" placeholder="请输入制单人编码" />
+        <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="creator">
-          <el-input v-model="form.creator" placeholder="请输入制单人" />
+        <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="deptCode">
-          <el-input v-model="form.deptCode" placeholder="请输入部门编码" />
+        <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">
-          <el-input v-model="form.dept" placeholder="请输入部门" />
+          <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="请输入目标合计" />
+          <el-input v-model="form.goalTotal" placeholder="请输入目标合计" disabled />
         </el-form-item>
-        <el-form-item label="备注" prop="notes">
+        <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>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
@@ -271,13 +324,91 @@ export default {
         goalTotal: null,
         notes: null,
         documentStatus: null,
-        deleteStatus: null
+        deleteStatus: 0,
+        documentDateRange: ['1949-01-01', '2999-12-31']
       },
       // 表单参数
-      form: {},
+      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: 0,
+        notes: null,
+        documentStatus: '开立态',
+        deleteStatus: 0,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: 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'}]
+      },
+      // 添加抽屉
+      drawerAdd: false,
+      // 修改抽屉
+      drawEdit: false,
+      // 抽屉打开方向
+      direction: 'rtl',
+      // 年度列表
+      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: '2032', label: '2032' }
+      ],
+      // 时间选择器：一周内，一个月内，三个月内
+      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]);
+          }
+        }]
+      },
+      // 单据时间范围
+      documentDateRange: '',
     };
   },
   created() {
@@ -291,6 +422,7 @@ export default {
         this.annualSaleGoalList = response.rows;
         this.total = response.total;
         this.loading = false;
+        console.log(this.annualSaleGoalList);
       });
     },
     // 取消按钮
@@ -314,10 +446,10 @@ export default {
         creator: null,
         deptCode: null,
         dept: null,
-        goalTotal: null,
+        goalTotal: 0,
         notes: null,
-        documentStatus: null,
-        deleteStatus: null
+        documentStatus: '开立态',
+        deleteStatus: 0
       };
       this.resetForm("form");
     },
@@ -339,18 +471,16 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加年度销售目标";
+      this.reset()
+      this.drawerAdd = true
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
       getAnnualSaleGoal(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改年度销售目标";
+        this.form = response.data
+        this.drawEdit = true
       });
     },
     /** 提交按钮 */
@@ -360,19 +490,23 @@ export default {
           if (this.form.id != null) {
             updateAnnualSaleGoal(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
-              this.open = false;
+              this.drawEdit = false;
               this.getList();
             });
           } else {
             addAnnualSaleGoal(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
-              this.open = false;
+              this.drawerAdd = false;
               this.getList();
             });
           }
         }
       });
     },
+    addOrEdit() {
+      console.log(this.form);
+      this.submitForm()
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
@@ -388,6 +522,18 @@ export default {
       this.download('goal_management/annualSaleGoal/export', {
         ...this.queryParams
       }, `annualSaleGoal_${new Date().getTime()}.xlsx`)
+    },
+    /** 关闭添加抽屉*/
+    handleClose(done) {
+      this.$confirm('确认关闭？').then(_ => {
+        done();
+        this.reset()
+      }).catch(_ => {})
+    },
+    /** 查看时间范围，范围是个时间戳数组*/
+    lookValue() {
+      console.log(this.documentDateRange);
+      console.log(this.queryParams);
     }
   }
 };