index.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. <template>
  2. <basic-container>
  3. <avue-crud
  4. :data="data"
  5. ref="crud"
  6. :option="option"
  7. @resetColumn="resetColumn"
  8. @saveColumn="saveColumn"
  9. >
  10. <template slot="menuLeft">
  11. <el-button
  12. type="primary"
  13. size="small"
  14. icon="el-icon-edit"
  15. @click="addDetail"
  16. :disabled="disabled"
  17. >上传
  18. </el-button>
  19. </template>
  20. <template slot="url" slot-scope="{ row }">
  21. <el-input
  22. placeholder="请输入内容"
  23. size="small"
  24. v-if="row.$cellEdit"
  25. v-model="row.url"
  26. class="input-with-select"
  27. >
  28. <el-button slot="append" @click="singleLineUpload(row)"
  29. >附件</el-button
  30. >
  31. </el-input>
  32. <span v-else>{{ row.url }}</span>
  33. </template>
  34. <template slot-scope="scope" slot="menu">
  35. <el-button
  36. icon="el-icon-download"
  37. :size="scope.size"
  38. :type="scope.type"
  39. @click="download(scope)"
  40. >查看
  41. </el-button>
  42. <el-button
  43. :type="scope.type"
  44. :size="scope.size"
  45. icon="el-icon-edit"
  46. @click.stop="rowCell(scope.row, scope.index)"
  47. :disabled="disabled"
  48. >
  49. {{ scope.row.$cellEdit ? "保存" : "修改" }}
  50. </el-button>
  51. <el-button
  52. :type="scope.type"
  53. :size="scope.size"
  54. icon="el-icon-delete"
  55. @click.stop="rowDel(scope.row, scope.index)"
  56. :disabled="disabled"
  57. >删除
  58. </el-button>
  59. </template>
  60. </avue-crud>
  61. <el-dialog
  62. title="上传附件"
  63. append-to-body
  64. :visible.sync="excelBox"
  65. width="555px"
  66. :close-on-click-modal="false"
  67. v-dialog-drag
  68. >
  69. <el-upload
  70. class="upload-demo"
  71. drag
  72. style="text-align: center"
  73. ref="upload"
  74. :action="incomingAction ? incomingAction : action"
  75. :headers="headers"
  76. :on-success="onSuccess"
  77. multiple
  78. >
  79. <i class="el-icon-upload"></i>
  80. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  81. <div class="el-upload__tip" slot="tip">
  82. 如上传文件过大,请耐心等待上传成功
  83. </div>
  84. </el-upload>
  85. </el-dialog>
  86. <el-dialog
  87. title="修改附件"
  88. append-to-body
  89. :visible.sync="excelTwo"
  90. width="555px"
  91. :close-on-click-modal="false"
  92. v-dialog-drag
  93. >
  94. <el-upload
  95. class="upload-demo"
  96. drag
  97. style="text-align: center"
  98. :action="incomingAction ? incomingAction : action"
  99. :headers="headers"
  100. :show-file-list="false"
  101. :on-success="onSuccessTwo"
  102. >
  103. <i class="el-icon-upload"></i>
  104. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  105. <div class="el-upload__tip" slot="tip">
  106. 如上传文件过大,请耐心等待上传成功
  107. </div>
  108. </el-upload>
  109. </el-dialog>
  110. <el-dialog
  111. width="80%"
  112. title="附件"
  113. :visible.sync="innerVisible"
  114. :close-on-click-modal="false"
  115. append-to-body
  116. >
  117. <div style="width: 50%;height: 50%;margin: 0 auto">
  118. <img :src="imgUrl" alt="" style="width: 100%;height: 100%;" />
  119. </div>
  120. </el-dialog>
  121. </basic-container>
  122. </template>
  123. <script>
  124. import { getToken } from "@/util/auth";
  125. import { sharedDeletion } from "@/api/user";
  126. import option from "@/views/exportTrade/customerInquiry/config/mainList.json";
  127. import { gainUser } from "@/api/basicData/customerInquiry";
  128. import { updateListRemove } from "@/api/uploadFile/upload-file";
  129. export default {
  130. name: "index",
  131. props: {
  132. data: {
  133. type: Object
  134. },
  135. incomingAction: {
  136. type: String
  137. },
  138. deleteUrl: {
  139. type: String
  140. },
  141. enumerationValue: {
  142. type: Number
  143. },
  144. typeUpload: {
  145. type: String
  146. },
  147. disabled: {
  148. type: Boolean
  149. }
  150. },
  151. data() {
  152. return {
  153. excelBox: false,
  154. excelTwo: false,
  155. innerVisible: false,
  156. form: {},
  157. imgUrl: "",
  158. action: "/api/blade-resource/oss/endpoint/put-file",
  159. headers: { "Blade-Auth": "Bearer " + getToken() },
  160. option: {},
  161. originalOptions: {
  162. dialogDrag: true,
  163. index: true,
  164. refreshBtn: false,
  165. cellBtn: false,
  166. cancelBtn: false,
  167. delBtn: false,
  168. editBtn: false,
  169. addBtn: false,
  170. align: "center",
  171. column: [
  172. {
  173. label: "文件名称",
  174. prop: "fileName",
  175. index: 1,
  176. width: 140,
  177. cell: true,
  178. overHidden: true
  179. },
  180. {
  181. label: "文件地址",
  182. prop: "url",
  183. index: 2,
  184. overHidden: true
  185. },
  186. {
  187. type: "select",
  188. dicUrl: "/api/blade-system/dict-biz/dictionary?code=file_type",
  189. props: {
  190. label: "dictValue",
  191. value: "dictValue"
  192. },
  193. label: "文件属性",
  194. prop: "paymentType",
  195. search: false,
  196. index: 3,
  197. width: 140,
  198. overHidden: true,
  199. cell: true
  200. },
  201. {
  202. label: "备注",
  203. prop: "remarks",
  204. index: 4,
  205. cell: true,
  206. overHidden: true
  207. }
  208. ]
  209. },
  210. uploadCount: 0
  211. };
  212. },
  213. async created() {
  214. /**
  215. * 已定义全局方法,直接使用,getColumnData获取列数据,参数传值(表格名称,引入的本地JSON的数据定义的名称)
  216. * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
  217. * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
  218. */
  219. this.option = await this.getColumnData(this.getColumnName(this.enumerationValue),this.originalOptions);
  220. },
  221. methods: {
  222. //自定义列保存
  223. async saveColumn() {
  224. /**
  225. * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
  226. * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
  227. * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
  228. */
  229. const inSave = await this.saveColumnData(this.getColumnName(this.enumerationValue),this.option);
  230. if (inSave) {
  231. this.$message.success("保存成功");
  232. //关闭窗口
  233. this.$refs.crud.$refs.dialogColumn.columnBox = false;
  234. }
  235. },
  236. //自定义列重置
  237. async resetColumn() {
  238. this.option = this.originalOptions;
  239. const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue),this.originalOptions);
  240. if (inSave) {
  241. this.$message.success("重置成功");
  242. this.$refs.crud.$refs.dialogColumn.columnBox = false;
  243. }
  244. },
  245. //新增上传成功
  246. onSuccess(response, file, fileList) {
  247. this.$refs.crud.rowCellAdd({
  248. fileName: response.data.originalName,
  249. url: response.data.link
  250. });
  251. this.uploadCount++;
  252. if (this.uploadCount === fileList.length) {
  253. this.$refs.upload.clearFiles();
  254. this.excelBox = false;
  255. this.uploadCount = 0;
  256. }
  257. },
  258. //修改上传成功
  259. onSuccessTwo(response) {
  260. this.form.fileName = response.data.originalName;
  261. this.form.url = response.data.link;
  262. this.data[this.form.$index] = this.form;
  263. this.excelTwo = false;
  264. },
  265. //单行上传
  266. singleLineUpload(row) {
  267. this.form = row;
  268. this.excelTwo = true;
  269. },
  270. //开启批量上传
  271. addDetail() {
  272. this.excelBox = true;
  273. },
  274. //下载附件
  275. download(scope) {
  276. console.log(scope.row.url);
  277. if (scope.row.url) {
  278. if (
  279. scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
  280. ".jpg" ||
  281. scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
  282. ".png" ||
  283. scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
  284. ".JPG" ||
  285. scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
  286. ".PNG"
  287. ) {
  288. this.imgUrl = scope.row.url;
  289. this.innerVisible = true;
  290. } else {
  291. window.open(scope.row.url);
  292. }
  293. } else {
  294. this.$message.error("请上传附件");
  295. }
  296. },
  297. //修改触发
  298. rowCell(row, index) {
  299. if (row.$cellEdit == true) {
  300. this.$set(row, "$cellEdit", false);
  301. } else {
  302. this.$set(row, "$cellEdit", true);
  303. }
  304. // this.$refs.crud.rowCell(row, index)
  305. },
  306. rowDel(row, index) {
  307. this.$confirm("确定将选择数据删除?", {
  308. confirmButtonText: "确定",
  309. cancelButtonText: "取消",
  310. type: "warning"
  311. }).then(() => {
  312. if (row.id) {
  313. if (this.typeUpload == "CK") {
  314. updateListRemove(row.id, this.deleteUrl).then(res => {
  315. if (res.data.success) {
  316. this.$message.success("操作成功!");
  317. this.data.splice(index, 1);
  318. }
  319. });
  320. } else {
  321. sharedDeletion(this.deleteUrl, row.id).then(res => {
  322. if (res.data.success) {
  323. this.$message.success("操作成功!");
  324. this.data.splice(index, 1);
  325. }
  326. });
  327. }
  328. } else {
  329. this.data.splice(index, 1);
  330. }
  331. });
  332. }
  333. }
  334. };
  335. </script>
  336. <style scoped></style>