update:admin 新增外呼套餐

src/api/admin/voicePackage.js

@@ -16,3 +16,12 @@ export function getVoicePackage(id) {
     method: 'get'
   })
 }
+
+// 新增通话套餐
+export function addVoicePackage(data) {
+  return request({
+    url: '/admin/voice-package',
+    method: 'post',
+    data
+  })
+}

src/views/admin/voicePackage/index.vue

@@ -13,6 +13,9 @@
     </el-card>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
     </el-row>
 
@@ -38,11 +41,50 @@
     </el-table>
 
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+    <el-dialog title="新增通话套餐" :visible.sync="formOpen" width="520px" append-to-body>
+      <el-form ref="packageForm" :model="form" :rules="rules" label-width="130px" size="small">
+        <el-form-item label="套餐名称" prop="packageName">
+          <el-input v-model="form.packageName" placeholder="请输入套餐名称" />
+        </el-form-item>
+        <el-form-item label="套餐分钟数" prop="times">
+          <el-input-number v-model="form.times" :min="1" :precision="0" controls-position="right" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="套餐价格(元)" prop="price">
+          <el-input-number v-model="form.price" :min="0" :precision="2" :step="1" controls-position="right" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="超出单价(元/分钟)" prop="expirePrice">
+          <el-input-number v-model="form.expirePrice" :min="0" :precision="4" :step="0.01" controls-position="right" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :label="1">启用</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="formSubmitting" @click="submitForm">确 定</el-button>
+        <el-button @click="formOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listVoicePackage } from '@/api/admin/voicePackage'
+import { listVoicePackage, addVoicePackage } from '@/api/admin/voicePackage'
+
+const defaultForm = () => ({
+  packageName: null,
+  times: null,
+  price: null,
+  expirePrice: null,
+  status: 1,
+  remark: null
+})
 
 export default {
   name: 'AdminVoicePackage',
@@ -56,6 +98,15 @@ export default {
         pageNum: 1,
         pageSize: 10,
         packageName: null
+      },
+      formOpen: false,
+      formSubmitting: false,
+      form: defaultForm(),
+      rules: {
+        packageName: [{ required: true, message: '套餐名称不能为空', trigger: 'blur' }],
+        times: [{ required: true, message: '套餐分钟数不能为空', trigger: 'blur' }],
+        price: [{ required: true, message: '套餐价格不能为空', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
       }
     }
   },
@@ -78,6 +129,28 @@ export default {
     resetQuery() {
       this.resetForm('queryForm')
       this.handleQuery()
+    },
+    handleAdd() {
+      this.form = defaultForm()
+      this.formOpen = true
+      this.$nextTick(() => {
+        if (this.$refs.packageForm) this.$refs.packageForm.clearValidate()
+      })
+    },
+    submitForm() {
+      this.$refs.packageForm.validate(valid => {
+        if (!valid) return
+        this.formSubmitting = true
+        addVoicePackage({ ...this.form }).then(res => {
+          if (res.code === 200) {
+            this.msgSuccess('新增成功')
+            this.formOpen = false
+            this.getList()
+          }
+        }).finally(() => {
+          this.formSubmitting = false
+        })
+      })
     }
   }
 }