addSetMeal.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <template>
  2. <div>
  3. <div class="search">
  4. <Search :SearchForm="SetMealSearchForm" @query="initData" @reset="reset"></Search>
  5. </div>
  6. <div class="addSetMeal">
  7. <a-button type="primary" @click="visible = true; Edit = true;Type=true">新增套餐</a-button>
  8. <a-button @click="breakFlos">返回</a-button>
  9. </div>
  10. <div class="table">
  11. <a-table row-key="id" :data="tableData" :columns="columnsTarrit" :pagination="pagination"
  12. :scroll="{ x: 'auto' }" @page-change="evChangePage">
  13. <template #status="{ record }">
  14. <a-tag :color="record.status == 1 ? '#7bc616' : '#86909c'">{{ record.status == 1 ? '上架' : '下架'
  15. }}</a-tag>
  16. </template>
  17. <template #options="{ record }">
  18. <a-space>
  19. <a-button type="text" @click="SetUpPackage(record)">修改</a-button>
  20. <a-button type="text" @click="unmount(record)">{{ record.status == 1 ? '下架' : '上架' }}</a-button>
  21. <a-popconfirm content="是否要删除该资费商品?" @ok="handelDeleteTariff(record)">
  22. <a-button type="text">删除</a-button>
  23. </a-popconfirm>
  24. </a-space>
  25. </template>
  26. </a-table>
  27. </div>
  28. <a-modal v-model:visible="visible" width="600px" @cancel="handelCancel" :title="Edit ? '新增套餐计划商品' : '编辑套餐计划商品'">
  29. <div class="Form">
  30. <a-form ref="formRef" :rules="rules" :model="Form">
  31. <a-form-item label="套餐名称" field="label" validate-trigger="input">
  32. <a-input placeholder="请输入套餐名称" v-model="Form.label"></a-input>
  33. </a-form-item>
  34. <div class="title">套餐名称将在终端用户的充值也中展示,建议不超过10个字</div>
  35. <a-form-item label="充值类型" field="type" validate-trigger="input">
  36. <a-select v-model="Form.type" placeholder="请选择充值类型">
  37. <a-option v-for="item in puyType" :value="item.value" :key="item.value">{{ item.label
  38. }}</a-option>
  39. </a-select>
  40. </a-form-item>
  41. <a-form-item label="充值周期" field="period" validate-trigger="input">
  42. <a-input v-model="Form.period"></a-input>
  43. <a-select v-model="Form.timeUnit" style="width: 140px; margin:0 8px;">
  44. <a-option v-for="item in cyciy" :value="item.value" :key="item.value">{{ item.label
  45. }}</a-option>
  46. </a-select>
  47. </a-form-item>
  48. <a-form-item label="充值售价" field="price" validate-trigger="input">
  49. <a-input v-model="Form.price"></a-input>
  50. <a-select v-model="Form.currency" style="width: 140px; margin:0 8px;">
  51. <a-option v-for="item in Currency" :value="item.value" :key="item.value">{{ item.label
  52. }}</a-option>
  53. </a-select>
  54. </a-form-item>
  55. <a-form-item label="默认绑定资费" field="trafficId" validate-trigger="blur">
  56. <a-select v-model="Form.trafficId">
  57. <a-option v-for="item in tariffListData" :value="item.id" :key="item.id">{{ item.label
  58. }}</a-option>
  59. </a-select>
  60. </a-form-item>
  61. <div class="title">若更改绑定资费后已充值的用户仍使用之前的资费请谨慎操作!!</div>
  62. <a-form-item label="流量大小" field="Flow" validate-trigger="change" v-if="Form.type == 2">
  63. <a-input v-model="Form.flow"></a-input>
  64. <a-select v-model="Form.flowUnit" style="width: 140px; margin:0 8px;">
  65. <a-option value="KB">KB</a-option>
  66. <a-option value="MB">MB</a-option>
  67. <a-option value="GB">GB</a-option>
  68. </a-select>
  69. </a-form-item>
  70. </a-form>
  71. </div>
  72. <template #footer>
  73. <a-button @click="handelCancel">取消</a-button>
  74. <a-button type="primary" @click="handleSubmit">确定</a-button>
  75. </template>
  76. </a-modal>
  77. </div>
  78. </template>
  79. <script setup>
  80. import { defineEmits, defineProps, toRefs, ref, onMounted } from 'vue';
  81. import { CheckTariffPackages } from '@/api/path/tariffManagement.api'
  82. import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
  83. import Search from '@/components/Search/index.vue'
  84. import { columnsTarrit } from '../config'
  85. import { tariffList, addTariffPackage, UpdateTariffTtems, DeleteTariffItems } from "@/api/path/tariffManagement.api"
  86. import { Message, Modal } from '@arco-design/web-vue';
  87. const props = defineProps({
  88. list: Object
  89. })
  90. const emits = defineEmits(['break'])
  91. const state = ref({
  92. pagination: {
  93. total: 0,
  94. pageSize: 10,
  95. current: 1,
  96. simTerminalId: null
  97. },
  98. visible: false,
  99. puyType: [],
  100. cyciy: [],
  101. Currency: [],
  102. tariffListData: [],
  103. billingMethodList: [],
  104. Form: {
  105. label: '',
  106. type: "",
  107. period: "",
  108. timeUnit: "",
  109. price: "",
  110. currency: "",
  111. trafficId: "",
  112. flow: "",
  113. flowUnit: "MB",
  114. id: "",
  115. },
  116. formRef: null,
  117. Edit: true,
  118. Type:true
  119. })
  120. const { pagination, visible, puyType, Currency, cyciy, tariffListData, Form, formRef, billingMethodList, Edit,Type } = toRefs(state.value)
  121. const rules = {
  122. label: [{ required: true, message: '套餐名称不能为空' }, {
  123. validator: (value, cb) => {
  124. if (value.length > 10) {
  125. cb('套餐名称最多10个字符');
  126. } else {
  127. cb();
  128. }
  129. }
  130. }],
  131. type: [{ required: true, message: '请选择充值类型' }],
  132. period: [{ required: true, message: '请填写充值周期' }, {
  133. validator: (value, cb) => {
  134. const pattern = /^[1-9]\d*$/
  135. if (!pattern.test(value)) {
  136. cb('请输入整数')
  137. } else {
  138. cb()
  139. }
  140. }
  141. }],
  142. price: [
  143. { required: true, message: '请填写充值售价' },
  144. {
  145. validator: (value, cb) => {
  146. // 修改正则表达式,使其支持最多两位小数
  147. const pattern = /^\d+(\.\d{1,2})?$/;
  148. if (!pattern.test(value)) {
  149. cb('请输入合法的数字,最多支持两位小数');
  150. } else {
  151. cb();
  152. }
  153. }
  154. }
  155. ],
  156. trafficId: [{ required: true, message: '请选择充值绑定资费' }]
  157. }
  158. const processData = (data) => {
  159. return (data.records || []).map((item, index) => {
  160. return {
  161. ...item,
  162. priceName: item.price + item.currency,
  163. typeName: item.type == 1 ? '服务时长' : "购买流量",
  164. profitPrice: item.billingMethod == 1 ? '---' : item.profitPrice + item.currency,
  165. billingMethod: filterDict(billingMethodList.value, item.billingMethod),
  166. costPrice: item.billingMethod == 1? item.flow+item.flowUnit+'/'+ item.price +item.currency : item.costPrice + item.trafficCurrency,
  167. oldPrice: item.billingMethod == 1 ? '---' : item.oldPrice + item.trafficCurrency,
  168. }
  169. })
  170. }
  171. const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, CheckTariffPackages, processData)
  172. const handleSubmit = () => {
  173. formRef.value.validate(async (errors) => {
  174. if (!errors) {
  175. const FormList = {
  176. ...Form.value,
  177. type: Number(Form.value.type),
  178. period: Number(Form.value.period),
  179. simTerminalId: pagination.value.simTerminalId
  180. }
  181. if (Edit.value) {
  182. delete FormList.id
  183. }
  184. let res = Type.value ? await addTariffPackage(FormList) : await UpdateTariffTtems(FormList)
  185. if (res.code === 200) {
  186. initData()
  187. Message.success(Type.value ? '添加成功' : '修改成功')
  188. visible.value = false
  189. handelCancel()
  190. }
  191. }
  192. })
  193. }
  194. const handelCancel = () => {
  195. Form.value.label = ""
  196. Form.value.type = puyType.value[0]?.value
  197. Form.value.period = ""
  198. Form.value.timeUnit = cyciy.value[0]?.value
  199. Form.value.price = ""
  200. Form.value.currency = Currency.value[0]?.value
  201. Form.value.trafficId = null
  202. Edit.value = true
  203. visible.value = false
  204. }
  205. const unmount = async (record) => {
  206. Modal.info({
  207. title: `确定要${record.status == 1 ? '下架' : '上架'}吗?`,
  208. content: '',
  209. onOk: async () => {
  210. const FormList = {
  211. ...record,
  212. type: Number(Form.value.type),
  213. period: Number(Form.value.period),
  214. simTerminalId: pagination.value.simTerminalId
  215. }
  216. let res = await UpdateTariffTtems(FormList)
  217. if (res.code === 200) {
  218. Message.success(`${record.status == 1 ? '下架' : '上架'}成功`)
  219. initData()
  220. }
  221. }
  222. });
  223. }
  224. const handelDeleteTariff = async (record) => {
  225. let res = await DeleteTariffItems({ id: record.id })
  226. if (res.code === 200) {
  227. Message.success('删除成功')
  228. initData()
  229. }
  230. }
  231. const SetUpPackage = async (record) => {
  232. Object.keys(Form.value).forEach(key => {
  233. Form.value[key] = record[key]
  234. })
  235. Form.value.price = record.price.split('/')[0];
  236. Form.value.type = String(Form.value.type)
  237. visible.value = true
  238. Edit.value = false
  239. Type.value = false
  240. }
  241. const breakFlos = () => {
  242. emits('break', true)
  243. }
  244. onMounted(async () => {
  245. let dict = await Getdictionary(['RechargeType', 'PuyCycle', 'currencyType', 'billingMethod'])
  246. puyType.value = dict[0]
  247. Form.value.type = puyType.value[0]?.value
  248. cyciy.value = dict[1]
  249. Form.value.timeUnit = cyciy.value[0]?.value
  250. Currency.value = dict[2]
  251. Form.value.currency = Currency.value[0]?.value
  252. billingMethodList.value = dict[3]
  253. let res = await tariffList({ current: 1, size: 99999 ,source:props.list.source ,userId:props.list.userId})
  254. if (res.code === 200) {
  255. tariffListData.value = (res.data.records || []).map(item => {
  256. return {
  257. ...item,
  258. value: item.id,
  259. label: item.label + '---' + item.userName
  260. }
  261. })
  262. }
  263. pagination.value.simTerminalId = props.list.id
  264. initData()
  265. })
  266. </script>
  267. <style scoped lang='less'>
  268. .search,
  269. .table {
  270. margin-top: 20px;
  271. }
  272. .addSetMeal {
  273. display: flex;
  274. justify-content: space-between;
  275. }
  276. .title {
  277. font-size: 14px;
  278. color: #ccc;
  279. margin-left: 120px;
  280. margin-top: -15px;
  281. margin-bottom: 10px;
  282. }
  283. </style>