detail.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!-- 活动管理 说明书管理详情 -->
  2. <template>
  3. <div class="app-container">
  4. <el-form :model="form" ref="form" :rules="rules" label-width="110px">
  5. <el-form-item label="说明书名称:" prop="name">
  6. <el-input
  7. v-model="form.name"
  8. placeholder="请输入协议名称"
  9. :disabled="disabled"
  10. />
  11. </el-form-item>
  12. <el-form-item label="设备分类:" prop="categoryName">
  13. <el-select
  14. v-model="form.categoryName"
  15. placeholder="请选择设备分类"
  16. :disabled="disabled"
  17. >
  18. <el-option
  19. v-for="item in categoryOptions"
  20. :key="item.value"
  21. :label="item.label"
  22. :value="item.label"
  23. />
  24. </el-select>
  25. </el-form-item>
  26. <!-- justify="space-between" -->
  27. <el-form-item
  28. v-if="form.state != 0 && codeText != ''"
  29. label="二维码图片:"
  30. >
  31. <el-row type="flex">
  32. <vue-qr :text="codeText" :size="150" />
  33. <el-button
  34. type="text"
  35. v-clipboard:copy="codeText"
  36. v-clipboard:success="copySuccess"
  37. :disabled="false"
  38. >复制链接</el-button
  39. >
  40. </el-row>
  41. </el-form-item>
  42. <el-form
  43. :model="form"
  44. ref="form"
  45. :rules="rules"
  46. label-width="110px"
  47. :disabled="disabled"
  48. >
  49. <el-form-item label="说明书文件:" prop="fileUrl">
  50. <el-row type="flex" justify="space-between">
  51. <el-col :span="16">
  52. <el-input
  53. v-model="form.fileUrl"
  54. placeholder="请输入或上传下载路径"
  55. />
  56. </el-col>
  57. <el-col :span="6">
  58. <Upload @upload="upload" style="float: right" />
  59. </el-col>
  60. </el-row>
  61. </el-form-item>
  62. </el-form>
  63. </el-form>
  64. <div class="form-btn">
  65. <el-button @click="cancel">取消</el-button>
  66. <el-button v-if="!disabled" type="primary" @click="getSubmit"
  67. >确定
  68. </el-button>
  69. </div>
  70. </div>
  71. </template>
  72. <script>
  73. import { add, detail, edit } from "@/api/operation/explain";
  74. import { devCategoryMixin, devTypeMixin } from "@/mixin/index";
  75. import VueQr from "vue-qr";
  76. export default {
  77. // name:"operationExplainDetail",
  78. components: {
  79. VueQr,
  80. },
  81. mixins: [devTypeMixin, devCategoryMixin],
  82. data() {
  83. return {
  84. codeText: "",
  85. // 表单
  86. form: {
  87. state: 0,
  88. fileUrl: "",
  89. },
  90. // 只读
  91. disabled: false,
  92. // 是否强制
  93. typeOptions: [
  94. {
  95. value: 0,
  96. label: "否",
  97. },
  98. {
  99. value: 1,
  100. label: "是",
  101. },
  102. ],
  103. // 校验
  104. rules: {
  105. name: [{ required: true, message: "请输入协议名称", trigger: "blur" }],
  106. categoryName: [
  107. { required: true, message: "请选择设备类型", trigger: "change" },
  108. ],
  109. fileUrl: [
  110. { required: true, message: "请上传下载路径", trigger: "blur" },
  111. ],
  112. },
  113. };
  114. },
  115. mounted() {
  116. this.form.id = this.$route.query.id;
  117. this.form.state = this.$route.query.state;
  118. this.disabled = Boolean(this.$route.query.boolean == 1);
  119. this.getCateGory(1);
  120. this.getDetail();
  121. },
  122. methods: {
  123. // 详情
  124. getDetail() {
  125. if (this.form.state != 0) {
  126. detail(this.form.id).then((res) => {
  127. if (res.code === 0) {
  128. this.form = res.data;
  129. this.codeText =
  130. this.form.copyUrl + "pages/explain/index?id=" + this.form.id;
  131. }
  132. });
  133. }
  134. },
  135. // 复制成功
  136. copySuccess() {
  137. this.$message.success("复制成功!");
  138. },
  139. // 上传
  140. upload(e) {
  141. this.form.fileUrl = e.file;
  142. },
  143. // 取消
  144. cancel() {
  145. this.$tab.closeOpenPage("/operation/operationExplain");
  146. // this.$router.go(-1);
  147. },
  148. // 确定
  149. getSubmit() {
  150. if (this.categoryOptions) {
  151. for (var i = 0; i < this.categoryOptions.length; i++) {
  152. if (this.form.categoryName === this.categoryOptions[i].label) {
  153. this.form.categoryId = this.categoryOptions[i].value;
  154. break;
  155. }
  156. }
  157. }
  158. if (this.$route.query.state == 0) {
  159. add(this.form).then((res) => {
  160. if (res.code === 0) {
  161. this.$message.success("添加成功!");
  162. this.cancel();
  163. }
  164. });
  165. } else {
  166. edit(this.form).then((res) => {
  167. if (res.code === 0) {
  168. this.$message.success("修改成功!");
  169. this.cancel();
  170. }
  171. });
  172. }
  173. },
  174. },
  175. };
  176. </script>
  177. <style lang="scss" scoped>
  178. .el-form {
  179. width: 500px;
  180. }
  181. </style>