Newer
Older
KaiFengPC / src / views / project / projectConfiguration / dwwh / tableDalgo.vue
@zhangdeliang zhangdeliang on 23 May 11 KB 初始化项目
  1. <template>
  2. <div class="water-analysis-page" :class="{ iconCLass: typeList.type == 2 }">
  3. <div class="top">
  4. <el-form
  5. label-width="auto"
  6. label-position="right"
  7. :rules="Formrules"
  8. ref="ruleForm"
  9. inline
  10. :model="FormList"
  11. :key="isKey"
  12. :disabled="typeList.type == 1"
  13. >
  14. <el-divider content-position="left">基本信息</el-divider>
  15. <el-form-item label="社会统一信用代码:" prop="creditCode" style="width: 45%">
  16. <el-input v-model="FormList.creditCode" placeholder="请输入社会统一信用代码" />
  17. </el-form-item>
  18. <el-form-item label="单位名称:" prop="unitName" style="width: 45%">
  19. <el-input v-model="FormList.unitName" placeholder="请输入单位名称" />
  20. </el-form-item>
  21. <el-form-item label="类型:" prop="unitType" style="width: 45%">
  22. <el-select style="width: 100%" clearable v-model="FormList.unitType" placeholder="请选择类型">
  23. <el-option v-for="dict in unit_type" :key="dict.stCode" :label="dict.label" :value="dict.value"></el-option>
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item label="单位属性:" prop="unitProperty" style="width: 45%">
  27. <el-select style="width: 100%" clearable v-model="FormList.unitProperty" placeholder="请选择单位属性">
  28. <el-option v-for="dict in unit_property" :key="dict.stCode" :label="dict.label" :value="dict.value"></el-option>
  29. </el-select>
  30. </el-form-item>
  31. <el-form-item label="电话:" prop="unitPhone" style="width: 45%">
  32. <el-input v-model="FormList.unitPhone" placeholder="请输入电话" />
  33. </el-form-item>
  34. <el-form-item label="信用度:" prop="creditLine" style="width: 45%">
  35. <el-select style="width: 100%" clearable v-model="FormList.creditLine" placeholder="请选择信用度">
  36. <el-option v-for="dict in credit_line" :key="dict.stCode" :label="dict.label" :value="dict.value"></el-option>
  37. </el-select>
  38. </el-form-item>
  39. <el-form-item label="法人:" prop="legalPerson" style="width: 45%">
  40. <el-input v-model="FormList.legalPerson" placeholder="请输入法人" />
  41. </el-form-item>
  42. <el-form-item label="经营状态:" prop="manageStatus" style="width: 45%">
  43. <el-select clearable v-model="FormList.manageStatus" placeholder="请选择经营状态" style="width: 100%">
  44. <el-option v-for="dict in manage_status" :key="dict.stCode" :label="dict.label" :value="dict.value"></el-option>
  45. </el-select>
  46. </el-form-item>
  47. <!-- 地图弹框 -->
  48. <el-form-item label="地址:" prop="unitAddress" @click="clickMap(1)" style="width: 45%">
  49. <el-input v-model="FormList.unitAddress" placeholder="请输入地址" />
  50. </el-form-item>
  51. <el-form-item label="注册资本:" prop="registeredCapital" style="width: 45%">
  52. <el-input v-model="FormList.registeredCapital" placeholder="请输入注册资本">
  53. <template #append> 万元 </template>
  54. </el-input>
  55. </el-form-item>
  56. <el-form-item label="成立日期:" prop="registryDate" style="width: 45%">
  57. <el-date-picker
  58. style="width: 100%"
  59. clearable
  60. format="YYYY-MM-DD"
  61. value-format="YYYY-MM-DD HH:mm:ss"
  62. v-model="FormList.registryDate"
  63. type="date"
  64. range-separator="到"
  65. placeholder="成立日期"
  66. />
  67. </el-form-item>
  68. <el-form-item label="营业期限:" prop="businessAllotedTime" style="width: 45%">
  69. <el-date-picker
  70. style="width: 100%"
  71. clearable
  72. format="YYYY-MM-DD"
  73. value-format="YYYY-MM-DD HH:mm:ss"
  74. v-model="FormList.businessAllotedTime"
  75. type="date"
  76. range-separator="到"
  77. placeholder="营业期限"
  78. />
  79. </el-form-item>
  80. <el-form-item label="营业范围:" prop="businessScope" style="width: 93%">
  81. <el-input type="textarea" v-model="FormList.businessScope" placeholder="请输入营业范围" />
  82. </el-form-item>
  83. <el-form-item label="备注:" prop="remark" style="width: 93%">
  84. <el-input type="textarea" v-model="FormList.remark" placeholder="请输入备注" />
  85. </el-form-item>
  86. <el-form-item label="单位荣誉附件:" style="width: 93%">
  87. <ImageFileUpload
  88. :fileType="['txt', 'doc', 'xls', 'docx', 'pdf']"
  89. v-model:saveFileArr="FormList.fileSaveRequestList"
  90. :listType="'text'"
  91. :refType="'proProjectCompany'"
  92. />
  93. </el-form-item>
  94. <el-divider content-position="left">主要联系人</el-divider>
  95. <el-form-item label="姓名:" prop="primaryConcatPersonUserName" style="width: 45%">
  96. <el-select v-model="FormList.primaryConcatPersonUserName" placeholder="请选择" style="width: 100%" filterable>
  97. <el-option
  98. v-for="dict in userLists"
  99. :key="dict.userName"
  100. :label="dict.nickName + dict.phonenumber"
  101. :value="dict.userName"
  102. ></el-option>
  103. </el-select>
  104. </el-form-item>
  105. <el-form-item label="职位:" prop="primaryConcatPersonPosition" style="width: 45%">
  106. <el-input v-model="FormList.primaryConcatPersonPosition" placeholder="请输入职位" />
  107. </el-form-item>
  108. <el-form-item label="联系方式:" prop="primaryConcatPersonInformation" style="width: 45%">
  109. <el-input v-model="FormList.primaryConcatPersonInformation" placeholder="请输入联系方式" maxlength="11" />
  110. </el-form-item>
  111. <el-form-item label="邮箱:" prop="primaryConcatPersonEmail" style="width: 45%">
  112. <el-input v-model="FormList.primaryConcatPersonEmail" placeholder="请输入邮箱" />
  113. </el-form-item>
  114. <el-form-item label="电话:" prop="primaryConcatPersonTelephone" style="width: 45%">
  115. <el-input v-model="FormList.primaryConcatPersonTelephone" placeholder="请输入电话" />
  116. </el-form-item>
  117. <el-form-item label="备注:" prop="primaryConcatPersonRemark" style="width: 93%" type="textarea">
  118. <el-input v-model="FormList.primaryConcatPersonRemark" placeholder="请输入备注" />
  119. </el-form-item>
  120. <el-divider content-position="left">开票信息</el-divider>
  121. <el-form-item label="开票公司名称:" prop="makeCompanyName" style="width: 45%">
  122. <el-input v-model="FormList.makeCompanyName" placeholder="请输入开票公司名称" />
  123. </el-form-item>
  124. <el-form-item label="纳税人识别号:" prop="taxpayerId" style="width: 45%">
  125. <el-input v-model="FormList.taxpayerId" placeholder="请输入纳税人识别号" />
  126. </el-form-item>
  127. <el-form-item label="开户地址:" prop="openAddress" style="width: 45%">
  128. <el-input v-model="FormList.openAddress" placeholder="请输入开户地址" />
  129. </el-form-item>
  130. <el-form-item label="电话:" prop="makeCompanyPhone" style="width: 45%">
  131. <el-input v-model="FormList.makeCompanyPhone" placeholder="请输入电话" />
  132. </el-form-item>
  133. <el-form-item label="开户银行:" prop="openAccountBank" style="width: 45%">
  134. <el-input v-model="FormList.openAccountBank" placeholder="请输入开户银行" />
  135. </el-form-item>
  136. <el-form-item label="银行账号:" prop="bankAccount" style="width: 45%">
  137. <el-input v-model="FormList.bankAccount" placeholder="请输入银行账号" />
  138. </el-form-item>
  139. </el-form>
  140. <div style="text-align: right; width: 100%" v-show="!typeList">
  141. <el-button v-show="typeList.type != 1" type="primary" @click="submit">保存</el-button>
  142. <el-button @click="onModalCloseClick">关闭</el-button>
  143. </div>
  144. </div>
  145. <el-dialog
  146. v-model="isMap"
  147. title="地图选取位置(可搜索可直接点击获取)"
  148. :modal-append-to-body="false"
  149. :close-on-click-modal="false"
  150. width="800px"
  151. >
  152. <MapPosition v-if="isMap" :isShowSearch="true" :isShowTool="false" :isSelectAddress="true" @getPlace="getAddress"></MapPosition>
  153. <template #footer>
  154. <div class="dialog-footer">
  155. <el-button type="primary" @click="isMap = false">确 定</el-button>
  156. </div>
  157. </template>
  158. </el-dialog>
  159. </div>
  160. </template>
  161. <script setup>
  162. import { ElMessageBox } from 'element-plus';
  163. import { projectInfoAdd, projectInfoEdit } from '@/api/project/dwwh';
  164. import { listUser } from '@/api/system/user.js';
  165. import MapPosition from '@/components/Map/index.vue';
  166. import bus from '@/utils/mitt';
  167.  
  168. const { proxy } = getCurrentInstance();
  169. const { typeList } = defineProps(['typeList']);
  170. console.log(typeList, 'typeListtypeListtypeList');
  171. const { unit_type, unit_property, credit_line, manage_status } = proxy.useDict(
  172. 'unit_type',
  173. 'unit_property',
  174. 'credit_line',
  175. 'manage_status'
  176. );
  177. const emits = defineEmits();
  178. const ruleForm = ref(null);
  179. let isMap = ref(false);
  180. let FormList = ref({});
  181. const userLists = ref([]);
  182. const Formrules = reactive({
  183. creditCode: [{ required: true, message: '社会统一信用代码不能为空', trigger: 'blur' }],
  184. unitName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
  185. unitType: [{ required: true, message: '类型不能为空', trigger: 'change' }],
  186. unitAddress: [{ required: true, message: '地址不能为空', trigger: ['blur', 'change'] }],
  187. primaryConcatPersonUserName: [{ required: true, message: '主要联系人姓名不能为空', trigger: 'blur' }],
  188. primaryConcatPersonTelephone: [{ required: true, message: '主要联系人电话不能为空', trigger: 'blur' }],
  189. primaryConcatPersonInformation: [{ required: true, message: '主要联系人方式不能为空', trigger: 'blur' }],
  190. });
  191. function onModalCloseClick() {
  192. FormList.value = {};
  193.  
  194. emits('onModalClose');
  195. nextTick(() => {
  196. ruleForm.value.resetFields();
  197. });
  198. }
  199.  
  200. function handlePreview(file) {
  201. return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
  202. () => window.open(file.url),
  203. () => false
  204. );
  205. }
  206. function beforeRemove(file) {
  207. return true;
  208. }
  209. // 获取位置
  210. function getAddress(val) {
  211. FormList.value.unitAddress = val.caseAddress;
  212. }
  213. function submit() {
  214. console.log(2121212, typeList.type);
  215. proxy.$refs['ruleForm'].validate(valid => {
  216. if (valid) {
  217. if (typeList.type) {
  218. projectInfoEdit(FormList.value).then(({ code }) => {
  219. if (code == 200) {
  220. emits('onModalClose');
  221. FormList.value = {};
  222. }
  223. });
  224. } else {
  225. projectInfoAdd(FormList.value).then(({ code }) => {
  226. if (code == 200) {
  227. emits('onModalClose');
  228. FormList.value = {};
  229. }
  230. });
  231. }
  232. }
  233. });
  234. }
  235. function desertFilds() {
  236. FormList.value.fileSaveRequestList = [];
  237. proxy.$refs.ruleForm.resetFields();
  238. }
  239. defineExpose({ submit, desertFilds });
  240. let addressM = ref(0);
  241. function clickMap(v) {
  242. isMap.value = true;
  243. addressM.value = v;
  244. }
  245. // 获取联系人
  246. async function getUserList() {
  247. let res = await listUser();
  248. if (res && res.code == 200) {
  249. userLists.value = res.data || [];
  250. }
  251. }
  252. onMounted(() => {
  253. getUserList();
  254. bus.on('mapPointClick', ({ lat, lng, address = '武汉市xx' }) => {
  255. if (addressM.value == 1) {
  256. FormList.value.unitAddress = address;
  257. } else {
  258. FormList.value.openAddress = address;
  259. }
  260. isMap.value = false;
  261. });
  262. FormList.value = typeList || {};
  263. FormList.value.fileSaveRequestList = typeList.fileList1 || [];
  264. });
  265. </script>
  266. <style lang="scss" scoped>
  267. .water-analysis-page {
  268. padding: 20px;
  269. }
  270.  
  271. .pagination {
  272. float: right;
  273. margin-top: 10px;
  274. }
  275.  
  276. .iconCLass {
  277. :deep .el-input__wrapper {
  278. box-shadow: 0 0 0 0;
  279. }
  280. }
  281.  
  282. .tabs {
  283. :deep .el-input__wrapper {
  284. box-shadow: 0 0 0 0;
  285. }
  286. }
  287.  
  288. // .action-span {
  289. //
  290. // }
  291. </style>