You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

341 lines
9.2 KiB

4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
3 months ago
4 months ago
4 months ago
  1. <script setup>
  2. import { onMounted, reactive, ref } from 'vue'
  3. import { ElMessage, ElMessageBox } from 'element-plus'
  4. import request from '@/util/http'
  5. import { useAdminStore } from "@/store/index.js";
  6. import { storeToRefs } from "pinia";
  7. import { findMenuById, permissionMapping } from "@/utils/menuTreePermission.js"
  8. const adminStore = useAdminStore()
  9. const { adminData, menuTree } = storeToRefs(adminStore)
  10. const regeEdit = ref(false)
  11. const editFormRef = ref(null)
  12. const tableData = ref([])
  13. //搜索对象
  14. const getObj = ref({
  15. pageNum: 1,
  16. pageSize: 10
  17. })
  18. const total = ref(0)
  19. const rateEdit = ref({
  20. id: null,
  21. rateName: '',
  22. num: null,
  23. adminId: null,
  24. updateTime: Date.now(),
  25. })
  26. //货币条目
  27. const rateNames = [
  28. {
  29. value: 'USD',
  30. label: 'USD'
  31. },
  32. {
  33. value: 'HKD',
  34. label: 'HKD'
  35. },
  36. {
  37. value: 'THB',
  38. label: 'THB'
  39. },
  40. {
  41. value: 'VND',
  42. label: 'VND'
  43. },
  44. {
  45. value: 'CAD',
  46. label: 'CAD'
  47. },
  48. {
  49. value: 'MYR',
  50. label: 'MYR'
  51. },
  52. {
  53. value: 'KRW',
  54. label: 'KRW'
  55. },
  56. {
  57. value: 'JPY',
  58. label: 'JPY'
  59. },
  60. {
  61. value: 'CNY',
  62. label: 'CNY'
  63. }
  64. ]
  65. // 汇率校验
  66. const checkFreeGoldRadio = function (rule, value, callback) {
  67. if (value == '0' || value == null || value == '') {
  68. callback(new Error('请输入汇率比'))
  69. } else if (value < 0 || isNaN(value)) {
  70. callback(new Error('请输入正确的格式'))
  71. } else {
  72. callback()
  73. }
  74. }
  75. // 定义表单验证规则
  76. const rules = reactive({
  77. num: [{ validator: checkFreeGoldRadio, trigger: 'blur' }],
  78. })
  79. // 表单大小
  80. const formSize = ref('default')
  81. const getAllRate = async function (val) {
  82. try {
  83. const result = await request({
  84. url: '/rate/selectAll',
  85. method: 'POST',
  86. data: {
  87. pageNum: getObj.value.pageNum,
  88. pageSize: getObj.value.pageSize,
  89. }
  90. })
  91. console.log('这是汇率列表 请求成功', result)
  92. tableData.value = result.data.list
  93. total.value = result.data.total
  94. } catch (error) {
  95. console.log('请求失败', error);
  96. ElMessage.error('请求失败');
  97. }
  98. }
  99. const handlePageSizeChange = function (val) {
  100. getObj.value.pageSize = val
  101. getAllRate()
  102. }
  103. const handleCurrentChange = function (val) {
  104. getObj.value.pageNum = val
  105. getAllRate()
  106. }
  107. const getEditData = async function (row) {
  108. try {
  109. console.log('搜索参数', getObj.value)
  110. const result = await request({
  111. url: '/rate/selectById',
  112. data: { id: row.id }
  113. })
  114. console.log('根据id查 请求成功', result)
  115. rateEdit.value.id = row.id
  116. rateEdit.value.rateName = row.rateName
  117. rateEdit.value.num = row.num
  118. console.log('根据id获取的数据', rateEdit.value)
  119. rateEdit.value.adminId = adminData.value.id
  120. } catch (error) {
  121. console.log('请求失败', error)
  122. }
  123. }
  124. // 编辑汇率
  125. const editRate = async function () {
  126. if (findMenuById(menuTree.value, permissionMapping.Exchange_Rate_Modification)) {
  127. // 提交前验证 汇率是否为数字
  128. rateEdit.value.num = parseFloat(rateEdit.value.num);
  129. try {
  130. console.log('搜索参数', rateEdit.value)
  131. const result = await request({
  132. url: '/rate/update',
  133. data: rateEdit.value
  134. })
  135. console.log('请求成功', result)
  136. await getAllRate()
  137. } catch (error) {
  138. console.log('请求失败', error)
  139. }
  140. } else {
  141. ElMessage.error('没有权限')
  142. }
  143. }
  144. // 添加前验证
  145. const edit = () => {
  146. editFormRef.value.validate(async (valid) => {
  147. if (valid) {
  148. try {
  149. await ElMessageBox.confirm("确认修改?");
  150. await editRate();
  151. console.log("修改成功");
  152. regeEdit.value = false;
  153. } catch (error) {
  154. console.log("取消修改", error);
  155. regeEdit.value = false;
  156. }
  157. } else {
  158. ElMessage({
  159. type: "error",
  160. message: "请检查输入内容",
  161. })
  162. }
  163. })
  164. }
  165. const cancelEdit = () => {
  166. regeEdit.value = false
  167. }
  168. const handleEditDialogClose = () => {
  169. if (editFormRef.value) {
  170. getAllRate()
  171. }
  172. }
  173. // 日期格式化
  174. function formatDate(value) {
  175. if (!value) return ''
  176. const date = new Date(value)
  177. const year = date.getFullYear()
  178. const month = (date.getMonth() + 1).toString().padStart(2, '0')
  179. const day = date.getDate().toString().padStart(2, '0')
  180. const hours = date.getHours().toString().padStart(2, '0')
  181. const minutes = date.getMinutes().toString().padStart(2, '0')
  182. const seconds = date.getSeconds().toString().padStart(2, '0')
  183. return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  184. }
  185. // 输入框过滤
  186. function handleInput(value) {
  187. // 检查是否使用了中文句号
  188. if (value.includes('。') || /[^\d.]/g.test(value)) {
  189. ElMessage.warning('请输入正确的符号');
  190. // value = value.replace('。', '.');
  191. }
  192. // 处理多个小数点的情况,保留第一个,移除后续的
  193. const parts = value.split('.');
  194. if (parts.length > 2) {
  195. value = parts[0] + '.' + parts.slice(1).join('');
  196. ElMessage.warning('只能包含一个小数点');
  197. }
  198. // 禁止输入负数
  199. if (value.startsWith('-')) {
  200. ElMessage.warning('不允许输入负数');
  201. value = value.substring(1);
  202. }
  203. // 最多两位小数,超过时才显示提示
  204. if (value.includes('.')) {
  205. const parts = value.split('.')
  206. // 限制整数部分最多六位
  207. if (parts[0].length > 6) {
  208. parts[0] = parts[0].slice(0, 6)
  209. ElMessage.info('整数部分最多允许六位')
  210. }
  211. // 限制小数部分最多两位
  212. if (parts[1].length > 2) {
  213. parts[1] = parts[1].slice(0, 2)
  214. value = parts[0] + '.' + parts[1]
  215. ElMessage.info('最多允许两位小数')
  216. } else {
  217. value = parts[0] + '.' + parts[1]
  218. }
  219. } else {
  220. // 纯整数时限制最多六位
  221. if (value.length > 6) {
  222. value = value.slice(0, 6)
  223. ElMessage.info('整数部分最多允许六位')
  224. }
  225. }
  226. // 小数点前没有数字时补0
  227. if (value.startsWith('.')) {
  228. value = '0' + value;
  229. // 需求没有,注释,先不显示
  230. // ElMessage.info('已自动补充前导0');
  231. }
  232. // 更新表单值
  233. rateEdit.value.num = value
  234. return value
  235. }
  236. onMounted(async function () {
  237. await getAllRate()
  238. })
  239. </script>
  240. <template>
  241. <el-row>
  242. <el-col>
  243. <el-card class="box-card" style="max-width: 100%">
  244. <div>
  245. <el-table :data="tableData" v-if="(tableData.flag = 1)">
  246. <el-table-column type="index" label="序号" width="100px" fixed="left">
  247. <template #default="scope">
  248. <span>{{
  249. scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
  250. }}</span>
  251. </template>
  252. </el-table-column>
  253. <el-table-column prop="rateName" label="货币名称" :span="2" />
  254. <el-table-column prop="num" label="汇率" :span="2">
  255. <template #default="scope">
  256. <p>
  257. {{ scope.row.num }} 1
  258. </p>
  259. </template>
  260. </el-table-column>
  261. <el-table-column prop="updateTime" label="添加时间" :span="3">
  262. <template #default="scope">
  263. <span>{{ formatDate(scope.row.updateTime) }}</span>
  264. </template>
  265. </el-table-column>
  266. <el-table-column label="操作" :span="3">
  267. <template #default="scope">
  268. <el-button type="text" @click=" () => {
  269. regeEdit = true
  270. getEditData(scope.row)
  271. }
  272. ">编辑
  273. </el-button>
  274. </template>
  275. </el-table-column>
  276. </el-table>
  277. </div>
  278. <!-- 分页 -->
  279. <div class="pagination">
  280. <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
  281. layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
  282. @current-change="handleCurrentChange"></el-pagination>
  283. </div>
  284. </el-card>
  285. </el-col>
  286. </el-row>
  287. <!-- 这是编辑弹窗 -->
  288. <el-dialog v-model="regeEdit" title="修改汇率" width="500" :close-on-click-modal="false" @close="handleEditDialogClose">
  289. <template #footer>
  290. <el-form ref="editFormRef" style="max-width: 600px" :model="rateEdit" :rules="rules" label-width="auto"
  291. class="demo-ruleForm" :size="formSize" status-icon>
  292. <el-form-item prop="rateName" label="货币名称:">
  293. <el-input v-model="rateEdit.rateName" disabled style="width: 240px" />
  294. </el-form-item>
  295. <el-form-item prop="num" label="汇率:">
  296. <el-input v-model="rateEdit.num" @update:modelValue="handleInput" style="width: 120px" />
  297. <span class="unit">:1</span>
  298. <span class="rate-tip">
  299. (提示当前规则每
  300. <span>{{ rateEdit.num }}</span>
  301. <span>{{ rateEdit.rateName }}</span>可兑换 1 新币)
  302. </span>
  303. </el-form-item>
  304. <el-form-item>
  305. <div class="dialog-footer">
  306. <el-button type="primary" @click="edit">修改</el-button>
  307. <el-button @click="cancelEdit">取消</el-button>
  308. </div>
  309. </el-form-item>
  310. </el-form>
  311. </template>
  312. </el-dialog>
  313. </template>
  314. <style scoped>
  315. .pagination {
  316. margin-top: 20px;
  317. display: flex;
  318. }
  319. .box-card {
  320. margin-top: 20px;
  321. }
  322. .unit {
  323. margin-left: 10px;
  324. }
  325. .rate-tip {
  326. hyphens: auto;
  327. }
  328. </style>