edit.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <view class="uni-container">
  3. <uni-forms ref="form" :model="formData" validateTrigger="bind">
  4. <uni-forms-item name="app_status" label="">
  5. <uni-easyinput placeholder="app客户端" v-model="formData.app_status"></uni-easyinput>
  6. </uni-forms-item>
  7. <uni-forms-item name="user_name" label="">
  8. <uni-easyinput placeholder="用户名称" v-model="formData.user_name"></uni-easyinput>
  9. </uni-forms-item>
  10. <uni-forms-item name="user_brand" label="">
  11. <uni-easyinput placeholder="手机品牌" v-model="formData.user_brand"></uni-easyinput>
  12. </uni-forms-item>
  13. <uni-forms-item name="user_model" label="">
  14. <uni-easyinput placeholder="手机型号" v-model="formData.user_model"></uni-easyinput>
  15. </uni-forms-item>
  16. <uni-forms-item name="api_src" label="">
  17. <uni-easyinput placeholder="接口请求地址" v-model="formData.api_src"></uni-easyinput>
  18. </uni-forms-item>
  19. <uni-forms-item name="request_parameters" label="">
  20. <uni-easyinput placeholder="请求参数" v-model="formData.request_parameters"></uni-easyinput>
  21. </uni-forms-item>
  22. <uni-forms-item name="response_parameters" label="">
  23. <uni-easyinput placeholder="返回参数" v-model="formData.response_parameters"></uni-easyinput>
  24. </uni-forms-item>
  25. <uni-forms-item name="api_status" label="">
  26. <uni-easyinput placeholder="接口状态" v-model="formData.api_status"></uni-easyinput>
  27. </uni-forms-item>
  28. <uni-forms-item name="error_info" label="">
  29. <uni-easyinput placeholder="接口状态" v-model="formData.error_info"></uni-easyinput>
  30. </uni-forms-item>
  31. <view class="uni-button-group">
  32. <button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
  33. <navigator open-type="navigateBack" style="margin-left: 15px;">
  34. <button class="uni-button" style="width: 100px;">返回</button>
  35. </navigator>
  36. </view>
  37. </uni-forms>
  38. </view>
  39. </template>
  40. <script>
  41. import { validator } from '../../js_sdk/validator/cyt-logs.js';
  42. const db = uniCloud.database();
  43. const dbCmd = db.command;
  44. const dbCollectionName = 'cyt-logs';
  45. function getValidator(fields) {
  46. let result = {}
  47. for (let key in validator) {
  48. if (fields.includes(key)) {
  49. result[key] = validator[key]
  50. }
  51. }
  52. return result
  53. }
  54. export default {
  55. data() {
  56. let formData = {
  57. "app_status": "",
  58. "user_name": "",
  59. "user_brand": "",
  60. "user_model": "",
  61. "api_src": "",
  62. "request_parameters": "",
  63. "response_parameters": "",
  64. "api_status": "",
  65. "error_info": ""
  66. }
  67. return {
  68. formData,
  69. formOptions: {},
  70. rules: {
  71. ...getValidator(Object.keys(formData))
  72. }
  73. }
  74. },
  75. onLoad(e) {
  76. if (e.id) {
  77. const id = e.id
  78. this.formDataId = id
  79. this.getDetail(id)
  80. }
  81. },
  82. onReady() {
  83. this.$refs.form.setRules(this.rules)
  84. },
  85. methods: {
  86. /**
  87. * 验证表单并提交
  88. */
  89. submit() {
  90. uni.showLoading({
  91. mask: true
  92. })
  93. this.$refs.form.validate().then((res) => {
  94. return this.submitForm(res)
  95. }).catch(() => {
  96. }).finally(() => {
  97. uni.hideLoading()
  98. })
  99. },
  100. /**
  101. * 提交表单
  102. */
  103. submitForm(value) {
  104. // 使用 clientDB 提交数据
  105. return db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
  106. uni.showToast({
  107. title: '修改成功'
  108. })
  109. this.getOpenerEventChannel().emit('refreshData')
  110. setTimeout(() => uni.navigateBack(), 500)
  111. }).catch((err) => {
  112. uni.showModal({
  113. content: err.message || '请求服务失败',
  114. showCancel: false
  115. })
  116. })
  117. },
  118. /**
  119. * 获取表单数据
  120. * @param {Object} id
  121. */
  122. getDetail(id) {
  123. uni.showLoading({
  124. mask: true
  125. })
  126. db.collection(dbCollectionName).doc(id).field("app_status,user_name,user_brand,user_model,api_src,request_parameters,response_parameters,api_status,error_info").get().then((res) => {
  127. const data = res.result.data[0]
  128. if (data) {
  129. this.formData = data
  130. }
  131. }).catch((err) => {
  132. uni.showModal({
  133. content: err.message || '请求服务失败',
  134. showCancel: false
  135. })
  136. }).finally(() => {
  137. uni.hideLoading()
  138. })
  139. }
  140. }
  141. }
  142. </script>