index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <!-- 新增/修改项目文件 -->
  3. <div id="addProjectDialog">
  4. <el-dialog
  5. :title="dialogType === 'create' ? '添加项目' : '修改项目'"
  6. :visible.sync="addProjectVisible"
  7. width="570px"
  8. :before-close="handleClose"
  9. >
  10. <el-form :model="form" :rules="rules" ref="ruleForm">
  11. <el-form-item label="" prop="localName">
  12. <el-input v-model="form.localName" placeholder="请输入项目名称" autocomplete="off"></el-input>
  13. </el-form-item>
  14. <el-form-item label="">
  15. <el-upload class="avatar-uploader" accept="image/*" action="#" :show-file-list="false"
  16. :http-request="uploadImg">
  17. <img v-if="form.picInfo.key" :src="form.picInfo.key | getImage" class="avatar"/>
  18. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  19. </el-upload>
  20. </el-form-item>
  21. </el-form>
  22. <div slot="footer" class="dialog-footer">
  23. <el-button @click="handleClose">取 消</el-button>
  24. <el-button type="primary" @click="handleClick">确 定</el-button>
  25. </div>
  26. </el-dialog>
  27. </div>
  28. </template>
  29. <script lang="ts">
  30. import {Vue, Component, Prop, Emit, Watch, Ref} from "vue-property-decorator";
  31. import tools from "@/utils/maintain";
  32. import {imageUploadUrl, imageGetUrl} from "@/api/imageservice";
  33. import {projectCreate, projectUpdate} from "@/api/datacenter";
  34. import {ElForm} from "element-ui/types/form";
  35. @Component({
  36. name: "AddProjectDialog",
  37. components: {},
  38. filters: {
  39. getImage(key: string | undefined) {
  40. if (key) {
  41. return `${imageGetUrl}${key}`;
  42. } else {
  43. return "";
  44. }
  45. },
  46. },
  47. })
  48. export default class extends Vue {
  49. @Prop() private addProjectVisible!: boolean;
  50. @Prop() private dialogType!: string;
  51. @Prop() private formData!: any;
  52. @Ref("ruleForm") readonly ruleForm!: ElForm;
  53. @Emit("update:addProjectVisible")
  54. handleClose() {
  55. return false;
  56. }
  57. private form: any = {
  58. localName: "",
  59. picInfo: {},
  60. };
  61. private rules: any = {
  62. localName: [{required: true, message: "请输入项目名称", trigger: "blur"}],
  63. };
  64. /**
  65. * 自定义图片上传
  66. */
  67. private uploadImg(param: any) {
  68. const elFile = param.file;
  69. const fileReader = new FileReader();
  70. fileReader.readAsDataURL(elFile); //读取图片
  71. const ftype = elFile.type;
  72. const fname = elFile.name;
  73. const uid = elFile.uid;
  74. const createTime = tools.formatDate(new Date());
  75. fileReader.addEventListener("load", () => {
  76. // 读取完成
  77. const res = fileReader.result;
  78. //将canvas的base64位图片转换成图片png的file
  79. const blob = this.dataURLtoBlob(res, ftype);
  80. //将其转换成file对象
  81. const file = new File([blob], fname, {
  82. type: ftype,
  83. lastModified: Date.now(),
  84. }); //blob转file
  85. // try sending
  86. const reader = new FileReader();
  87. const fileType = file.name.split(".");
  88. const imgType = fileType[fileType.length - 1];
  89. const uploadKey = `${uid}.${imgType}`;
  90. reader.onloadend = () => {
  91. // 这个事件在读取结束后,无论成功或者失败都会触发
  92. if (reader.error) {
  93. console.error("读取文件失败:", reader.error);
  94. } else {
  95. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  96. const xhr = new XMLHttpRequest();
  97. xhr.open("POST", `${imageUploadUrl}${uploadKey}`);
  98. xhr.send(reader.result);
  99. xhr.onreadystatechange = () => {
  100. if (xhr.readyState == 4) {
  101. if (xhr.status == 200) {
  102. this.form.picInfo = {
  103. name: uid,
  104. key: uploadKey,
  105. systemId: "dataPlatform",
  106. type: "image",
  107. createTime: createTime,
  108. };
  109. }
  110. }
  111. };
  112. }
  113. };
  114. reader.readAsArrayBuffer(file);
  115. });
  116. }
  117. private dataURLtoBlob(dataURI: any, type: string) {
  118. const binary = atob(dataURI.split(",")[1]);
  119. const array = [];
  120. for (let i = 0; i < binary.length; i++) {
  121. array.push(binary.charCodeAt(i));
  122. }
  123. return new Blob([new Uint8Array(array)], {type: type});
  124. }
  125. /**
  126. * 点击确定(添加/修改项目)
  127. */
  128. private handleClick() {
  129. this.ruleForm.validate(async (valid) => {
  130. if (valid) {
  131. if (this.dialogType === "create") {
  132. //创建项目
  133. const params: any = {
  134. id: `Pj${new Date().getTime()}`,
  135. localName: this.form.localName,
  136. };
  137. if (this.form.picInfo?.key) {
  138. params.infos = {
  139. projPic: [this.form.picInfo],
  140. };
  141. }
  142. const res = await projectCreate({content: [params]});
  143. if (res.result === "success") {
  144. this.handleClose();
  145. this.$emit("update:projectList");
  146. this.$message.success("创建成功!");
  147. } else {
  148. this.$message.success(`创建失败!失败原因:${res.message}`);
  149. }
  150. } else if (this.dialogType === "update" && this.formData?.id) {
  151. //修改项目
  152. const params: any = {
  153. id: this.formData.id,
  154. localName: this.form.localName,
  155. };
  156. if (this.form.picInfo?.key) {
  157. params.infos = {
  158. projPic: [this.form.picInfo],
  159. };
  160. }
  161. const res = await projectUpdate({content: [params]});
  162. if (res.result === "success") {
  163. this.$emit("update:projectList");
  164. this.handleClose();
  165. this.$message.success("修改成功!");
  166. } else {
  167. this.$message.success(`修改失败!失败原因:${res.message}`);
  168. }
  169. }
  170. } else {
  171. return false;
  172. }
  173. });
  174. }
  175. @Watch("addProjectVisible")
  176. onVisibleChanged(val: boolean) {
  177. if (val) {
  178. this.form.localName = this.formData?.localName ? this.formData.localName : "";
  179. this.form.picInfo = this.formData?.infos?.projPic?.length ? this.formData.infos.projPic[0] : {};
  180. if (this.formData?.id) this.form.id = this.formData.id;
  181. }
  182. }
  183. }
  184. </script>
  185. <style lang="scss" scoped>
  186. ::v-deep .el-dialog__body {
  187. padding: 30px 120px;
  188. .avatar-uploader .el-upload {
  189. border: 1px dashed #d9d9d9;
  190. border-radius: 6px;
  191. cursor: pointer;
  192. position: relative;
  193. overflow: hidden;
  194. }
  195. .avatar-uploader .el-upload:hover {
  196. border-color: #409eff;
  197. }
  198. .avatar-uploader-icon {
  199. font-size: 28px;
  200. color: #8c939d;
  201. width: 120px;
  202. height: 120px;
  203. line-height: 120px;
  204. text-align: center;
  205. }
  206. .avatar {
  207. width: 120px;
  208. height: 120px;
  209. display: block;
  210. }
  211. }
  212. </style>