index.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <template>
  2. <!-- 新增楼层文件 -->
  3. <div id="addFloorDialog">
  4. <el-dialog title="新增楼层" :visible.sync="addFloorFileVisible" width="900px" :before-close="handleClose">
  5. <el-form ref="addfloorform" :model="form" label-width="120px" style="overflow: hidden">
  6. <el-form-item label="模型文件:">
  7. <el-upload
  8. class="upload-demo"
  9. ref="upload"
  10. action="/modelapi/model-file/upload"
  11. :on-preview="handlePreview"
  12. :on-remove="handleRemove"
  13. :file-list="fileList"
  14. :auto-upload="false"
  15. :on-change="onChangeUpLoad"
  16. :limit="1"
  17. >
  18. <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  19. </el-upload>
  20. </el-form-item>
  21. <el-form-item label="revit版本:">
  22. <el-select v-model="form.revitVersion" placeholder="请选择">
  23. <el-option v-for="item in revitVersionList" :key="`revit-${item.value}`" :label="item.label" :value="item.value"></el-option>
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item label="模型所属楼层:">
  27. <div class="floorModle">
  28. <el-select v-model="form.floorTypeVal" placeholder="请选择">
  29. <el-option v-for="item in floorType" :key="item.value" :label="item.label" :value="item.value"></el-option>
  30. </el-select>
  31. <!-- 计数 -->
  32. <el-input-number
  33. style="margin-left: 10px"
  34. v-model="form.floorNum"
  35. :min="1"
  36. :disabled="form.floorTypeVal === 'RF'"
  37. ></el-input-number>
  38. <!-- 是否夹层 -->
  39. <el-checkbox style="margin: 0 10px" v-model="form.haveInterlayer">是否夹层</el-checkbox>
  40. <!-- 夹层选择 -->
  41. <el-select v-model="form.interlayerTypeVal" :disabled="!form.haveInterlayer" placeholder="请选择">
  42. <el-option v-for="item in interlayerType" :key="item.value" :label="item.label" :value="item.value"></el-option>
  43. </el-select>
  44. </div>
  45. </el-form-item>
  46. <el-form-item label="备注信息:">
  47. <el-input type="textarea" v-model="form.desc"></el-input>
  48. </el-form-item>
  49. <el-form-item style="float: right">
  50. <el-button type="primary" @click="onSubmit">确认</el-button>
  51. <el-button @click="handleClose">取消</el-button>
  52. </el-form-item>
  53. </el-form>
  54. <div style="float: right; margin-top: -10px; color: #aaaaaa">目前只可识别标准字典定义的设备、部件</div>
  55. </el-dialog>
  56. </div>
  57. </template>
  58. <script lang="ts">
  59. import { Vue, Component, Prop, Emit, Ref, Watch } from "vue-property-decorator";
  60. import { UserModule } from "@/store/modules/user";
  61. import { modelFileUpload } from "@/api/modelapi";
  62. import { ElUpload } from "element-ui/types/upload";
  63. @Component({
  64. name: "AddFloorDialog",
  65. components: {},
  66. })
  67. export default class extends Vue {
  68. @Prop() private addFloorFileVisible!: boolean;
  69. @Prop() private FolderName!: string;
  70. @Prop() private floorList!: any[];
  71. @Prop() private FolderId!: string;
  72. @Ref("upload") readonly upload!: ElUpload;
  73. /**
  74. * 关闭添加楼层模型文件弹窗
  75. */
  76. @Emit("closeAddFloorDia")
  77. handleClose() {
  78. return;
  79. }
  80. private get projectId(): string {
  81. return UserModule.projectId;
  82. }
  83. private get username(): string {
  84. return UserModule.username;
  85. }
  86. private get userId(): string {
  87. return UserModule.userId;
  88. }
  89. mounted() {
  90. this.fileList = [];
  91. this.form.file = null;
  92. }
  93. // 创建楼层信息
  94. private form: any = {
  95. desc: "", //描述
  96. revitVersion: "2017", //revit默认版本
  97. floorTypeVal: "F", //楼层类型得值
  98. interlayerTypeVal: "M1", //夹层类型得值
  99. haveInterlayer: false, //是否有夹层
  100. file: null, //上传文件
  101. floorNum: 1, //楼层
  102. };
  103. // 上传楼层列表
  104. private fileList = [];
  105. // revit版本选项
  106. private revitVersionList = [
  107. {
  108. value: "2016",
  109. label: "2016",
  110. },
  111. {
  112. value: "2017",
  113. label: "2017",
  114. },
  115. {
  116. value: "2018",
  117. label: "2018",
  118. },
  119. ];
  120. // 楼层类型
  121. private floorType = [
  122. {
  123. value: "F",
  124. label: "正常层(F)",
  125. },
  126. {
  127. value: "RF",
  128. label: "屋顶(RF)",
  129. },
  130. {
  131. value: "B",
  132. label: "地下(B)",
  133. },
  134. ];
  135. // 夹层类型
  136. interlayerType = [
  137. {
  138. value: "M1",
  139. label: "夹层M1",
  140. },
  141. {
  142. value: "M2",
  143. label: "夹层M2",
  144. },
  145. {
  146. value: "M3",
  147. label: "夹层M3",
  148. },
  149. ];
  150. /**
  151. * 提交表单创建楼层并发出上传指令
  152. */
  153. private async onSubmit() {
  154. if (this.form.file == null) {
  155. this.$message.error("模型文件不能为空!");
  156. } else if (!this.form.revitVersion) {
  157. this.$message.error("revit版本不能为空!");
  158. } else {
  159. let FloorName: string | null = null;
  160. // 根据是否有夹层拼接楼层名
  161. if (this.form.haveInterlayer) {
  162. if (this.form.floorTypeVal === "RF") {
  163. FloorName = this.form.floorTypeVal + this.form.interlayerTypeVal;
  164. } else {
  165. FloorName = this.form.floorTypeVal + this.form.floorNum + this.form.interlayerTypeVal;
  166. }
  167. } else {
  168. if (this.form.floorTypeVal === "RF") {
  169. FloorName = this.form.floorTypeVal;
  170. } else {
  171. FloorName = this.form.floorTypeVal + this.form.floorNum;
  172. }
  173. }
  174. let FloorObj = this.floorList.find((item) => {
  175. return item.FloorName == FloorName;
  176. });
  177. if (FloorObj && FloorObj.Status !== 0) {
  178. this.$message.error("该楼层名称已存在,请勿重复创建!");
  179. } else {
  180. let data = {
  181. FileName: this.form.file.name,
  182. FloorName: FloorName,
  183. FolderId: this.FolderId,
  184. RevitVersion: this.form.revitVersion,
  185. Note: this.form.desc,
  186. ProjectId: this.projectId,
  187. ReplaceReason: null,
  188. Size: this.form.file.size,
  189. UserName: this.username,
  190. UserId: this.userId,
  191. };
  192. const res = await modelFileUpload(data);
  193. // 创建成功
  194. if (res.ModelId && res.UploadId) {
  195. this.$emit("uploadModelFile", {
  196. modelId: res.ModelId,
  197. uploadId: res.UploadId,
  198. file: this.form.file,
  199. });
  200. this.handleClose();
  201. } else {
  202. this.$message.info("准备分片上传模型文件接口失败!");
  203. }
  204. }
  205. }
  206. }
  207. /**
  208. * 上传到服务器
  209. */
  210. private submitUpload(FloorModelId: string) {
  211. console.log(FloorModelId);
  212. debugger;
  213. this.upload.submit();
  214. }
  215. /**
  216. * 文件列表移除文件时的钩子
  217. * @info 删除上传文件
  218. */
  219. private handleRemove() {
  220. this.fileList = [];
  221. this.form.file = null;
  222. }
  223. /**
  224. * 点击文件列表中已上传的文件时的钩子
  225. */
  226. private handlePreview(file: File, fileList: FileList) {
  227. console.log(file, fileList);
  228. }
  229. /**
  230. * 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
  231. * @info 获取上传文件
  232. */
  233. private onChangeUpLoad(file: File, fileList: FileList) {
  234. if (fileList.length) {
  235. this.form.file = file;
  236. }
  237. }
  238. @Watch("addFloorFileVisible")
  239. onVisibleChanged(val: boolean) {
  240. if (val) {
  241. this.handleRemove();
  242. this.form = {
  243. revitVersion: "2017", //revit默认版本
  244. desc: "", //描述
  245. floorTypeVal: "F", //楼层类型得值
  246. interlayerTypeVal: "M1", //夹层类型得值
  247. haveInterlayer: false, //是否有夹层
  248. file: null, //上传文件
  249. floorNum: 1, //楼层
  250. };
  251. }
  252. }
  253. }
  254. </script>
  255. <style lang="scss">
  256. #addFloorDialog {
  257. .floorModle {
  258. display: flex;
  259. justify-content: left;
  260. }
  261. }
  262. </style>