packageList.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <template>
  2. <div>
  3. <div class="search bg-white p-3">
  4. <el-form :model="searchForm" label-width="100px">
  5. <el-row>
  6. <el-col :span="5">
  7. <el-form-item label="状态">
  8. <el-select v-model="searchForm.use_able" clearable>
  9. <el-option label="启用" :value="true" />
  10. <el-option label="禁用" :value="false" />
  11. </el-select>
  12. </el-form-item>
  13. </el-col>
  14. <el-col :span="5">
  15. <el-form-item label="套餐名称">
  16. <el-input v-model="searchForm.name" clearable placeholder="请输入套餐名称"></el-input>
  17. </el-form-item>
  18. </el-col>
  19. </el-row>
  20. </el-form>
  21. <div class="flex justify-end">
  22. <el-button class="mr-3" @click="searchEvent"> 搜索 </el-button>
  23. </div>
  24. </div>
  25. <en-table-layout :tableData="tableData.records" :loading="loading">
  26. <template #toolbar>
  27. <div class="inner-toolbar w-11/12 flex justify-between">
  28. <div class="toolbar-btns">
  29. <el-button size="default" v-if="checkPermission(['warehouse:add'])" type="primary" @click="handleAddWarehouse">新增</el-button>
  30. </div>
  31. <!-- <div class="toolbar-search">
  32. <en-table-search @search="searchEvent" placeholder="请输入关键字搜索" />
  33. </div> -->
  34. </div>
  35. </template>
  36. <template #table-columns>
  37. <el-table-column prop="name" label="套餐名称" />
  38. <el-table-column prop="money" label="套餐金额" />
  39. <el-table-column prop="day" label="天数" />
  40. <el-table-column prop="user_num" label="可创建用户数" />
  41. <el-table-column prop="use_able" label="状态">
  42. <template #default="scope">
  43. <el-switch v-model="scope.row.use_able" inline-prompt active-text="启用" inactive-text="禁用" @change="switchUseAble($event, scope.row)" />
  44. </template>
  45. </el-table-column>
  46. <el-table-column prop="remark" label="套餐说明" />
  47. <el-table-column label="操作">
  48. <template #default="scope">
  49. <el-button size="default" v-if="checkPermission(['warehouse:update'])" @click="handleEditWarehouse(scope.$index, scope.row)">编辑</el-button>
  50. </template>
  51. </el-table-column>
  52. </template>
  53. <template #pagination>
  54. <el-pagination
  55. v-if="tableData.records && tableData.records.length"
  56. @size-change="handlePageSizeChange"
  57. @current-change="handlePageCurrentChange"
  58. :current-page="tableData.page"
  59. :page-sizes="[10, 20, 50, 100]"
  60. :page-size="tableData.size"
  61. layout="total, sizes, prev, pager, next, jumper"
  62. :total="tableData.total"
  63. >
  64. </el-pagination>
  65. </template>
  66. </en-table-layout>
  67. <el-dialog
  68. :title="packageForm.id ? '编辑套餐' : '添加套餐'"
  69. v-model="dialogVisible"
  70. width="500px"
  71. @open="handleDialogOpen"
  72. :modal-append-to-body="false"
  73. :close-on-click-modal="false"
  74. :close-on-press-escape="false"
  75. >
  76. <el-form :model="packageForm" :rules="stockRules" ref="packageFormRef" label-width="120px">
  77. <el-form-item label="权限:" prop="role_id">
  78. <el-select v-model="packageForm.role_id" clearable placeholder="请选择权限">
  79. <el-option v-for="item in roleArray" :key="item.role_id" :label="item.role_name" :value="item.role_id" />
  80. </el-select>
  81. </el-form-item>
  82. <el-form-item label="套餐名称:" prop="name">
  83. <el-input v-model="packageForm.name" :minlength="2" :maxlength="20" clearable placeholder="请输入套餐名称"></el-input>
  84. </el-form-item>
  85. <el-form-item label="套餐金额:" prop="money">
  86. <el-input v-model="packageForm.money" :minlength="2" :maxlength="20" clearable placeholder="请输入套餐金额"></el-input>
  87. </el-form-item>
  88. <el-form-item label="购买天数:" prop="day">
  89. <el-input v-model="packageForm.day" :minlength="2" :maxlength="20" clearable placeholder="请输入套餐天数"></el-input>
  90. </el-form-item>
  91. <el-form-item label="可创建用户数:" prop="user_num">
  92. <el-input v-model="packageForm.user_num" :minlength="2" :maxlength="20" clearable placeholder="请输入可创建用户数"></el-input>
  93. </el-form-item>
  94. <el-form-item label="状态:" prop="use_able">
  95. <el-switch v-model="packageForm.use_able" inline-prompt active-text="启用" inactive-text="禁用" />
  96. </el-form-item>
  97. <el-form-item label="套餐说明:" prop="remark">
  98. <el-input v-model="packageForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入"></el-input>
  99. </el-form-item>
  100. </el-form>
  101. <template #footer>
  102. <div class="dialog-footer">
  103. <el-button @click="dialogVisible = false">取 消</el-button>
  104. <el-button type="primary" @click="submitPackageForm">确 定</el-button>
  105. </div>
  106. </template>
  107. </el-dialog>
  108. </div>
  109. </template>
  110. <script lang="ts" setup>
  111. import { ref, onMounted, reactive } from 'vue';
  112. import { useStore } from 'vuex';
  113. import { ElMessageBox, FormInstance, ElMessage } from 'element-plus';
  114. import * as API_BasicSetting from '@/api/basicSetting';
  115. import * as API_Auth from '@/api/auth';
  116. import * as API_Package from '@/api/package';
  117. import Storage from '@/utils/storage';
  118. import router from '@/router';
  119. const store = useStore();
  120. const tableData = ref<any>({});
  121. const loading = ref(false);
  122. const dialogVisible = ref(false);
  123. const packageForm = ref<any>({
  124. role_id: '',
  125. name: '',
  126. money: '',
  127. day: '',
  128. use_able: false,
  129. remark: '',
  130. });
  131. const stockRules = ref<any>({
  132. role_id: [{ required: true, message: '请选择权限!', trigger: 'change' }],
  133. name: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
  134. money: [{ required: true, message: '请输入套餐金额', trigger: 'blur' }],
  135. day: [{ required: true, message: '请输入套餐天数', trigger: 'blur' }],
  136. use_able: [{ required: true, message: '请选择状态', trigger: 'change' }],
  137. user_num: [{ required: true, message: '请输入可创建用户数', trigger: 'blur' }],
  138. });
  139. const marketingList = ref<any[]>([]);
  140. const params = ref({
  141. data: [],
  142. page_no: 1,
  143. page_size: 10,
  144. });
  145. const roleArray = ref<any[]>([]);
  146. const packageFormRef = ref();
  147. const checkPermission = (permissions: string[]): boolean => {
  148. return true;
  149. };
  150. /* 启用禁用 */
  151. const switchUseAble = (event, row) => {
  152. API_Package.switchPackage(row.id).then((res) => {
  153. GET_PackageList();
  154. });
  155. };
  156. /* 打开新增窗口 */
  157. const handleAddWarehouse = () => {
  158. packageForm.value = {};
  159. dialogVisible.value = true;
  160. };
  161. /* 打开编辑窗口 */
  162. const handleEditWarehouse = (index: number, row: any) => {
  163. packageForm.value = { ...row };
  164. dialogVisible.value = true;
  165. };
  166. /* 搜索 */
  167. const searchForm = reactive({
  168. use_able: '',
  169. name: '',
  170. });
  171. const searchEvent = () => {
  172. Object.assign(params.value, searchForm);
  173. console.log(params);
  174. params.value.page_no = 1;
  175. GET_PackageList();
  176. };
  177. /* 更改条数 */
  178. const handlePageSizeChange = (size: number) => {
  179. params.value.page_size = size;
  180. GET_PackageList();
  181. };
  182. /* 更改页数 */
  183. const handlePageCurrentChange = (page: number) => {
  184. params.value.page_no = page;
  185. GET_PackageList();
  186. };
  187. const handleDialogOpen = () => {
  188. setTimeout(() => {
  189. packageFormRef.value.clearValidate();
  190. });
  191. };
  192. /* 提交套餐表单 */
  193. const submitPackageForm = () => {
  194. packageFormRef.value.validate((valid: boolean) => {
  195. if (valid) {
  196. const { id } = packageForm.value;
  197. const params = { ...packageForm.value };
  198. if (id) {
  199. API_Package.editPackage(id, params).then(() => {
  200. dialogVisible.value = false;
  201. ElMessage.success('修改成功!');
  202. GET_PackageList();
  203. });
  204. } else {
  205. API_Package.submitPackage(params).then(() => {
  206. dialogVisible.value = false;
  207. ElMessage.success('添加成功!');
  208. GET_PackageList();
  209. });
  210. }
  211. } else {
  212. ElMessage.error('表单填写有误,请核对!');
  213. /* store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
  214. return false;
  215. }
  216. });
  217. };
  218. /* 获取套餐列表 */
  219. const GET_PackageList = () => {
  220. console.log(params);
  221. loading.value = true;
  222. API_Package.packageList(params.value)
  223. .then((response) => {
  224. loading.value = false;
  225. tableData.value = response;
  226. })
  227. .catch(() => {
  228. loading.value = false;
  229. });
  230. };
  231. /* 获取权限列表 */
  232. const GET_RoleList = () => {
  233. API_Auth.getPackageRoleList({ page_no: 1, page_size: 10000 }).then((res) => {
  234. roleArray.value = res.records;
  235. });
  236. };
  237. onMounted(() => {
  238. GET_PackageList();
  239. GET_RoleList();
  240. });
  241. </script>