change-form.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. <template>
  2. <div class="doc-page">
  3. <h3 class="page-title" style="margin: 24px 0 16px;">项目变更申请表</h3>
  4. <table>
  5. <tbody>
  6. <tr>
  7. <td class="doc-label">研发项目名称</td>
  8. <td class="doc-input">
  9. <project-select v-model="currProjectId" @change="handleProjectChange" :disabled="disabled"></project-select>
  10. </td>
  11. <td class="doc-label">研发项目编号</td>
  12. <td class="doc-input">{{ selProject.xmbh }}</td>
  13. </tr>
  14. <tr>
  15. <td class="doc-label">项目负责人</td>
  16. <td class="doc-input">{{ selProject.xmfzrxm }} </td>
  17. <td class="doc-label">项目申请单位</td>
  18. <td class="doc-input">{{ selProject.xmsqdw }}</td>
  19. </tr>
  20. <tr>
  21. <td class="doc-label">变更类型</td>
  22. <td class="doc-input" colspan="3">
  23. <avue-select
  24. v-model="formData.zdmc"
  25. placeholder="请选择"
  26. :dic="changeTypeList"
  27. style="width: 100%"
  28. :disabled="disabled"
  29. ></avue-select>
  30. </td>
  31. </tr>
  32. <tr>
  33. <td class="doc-label">变更前</td>
  34. <td class="doc-input">
  35. <span v-if="!disabled">{{ selProject[formData.zdmc == 'xmfzr' ? 'xmfzrxm' : formData.zdmc] }}</span>
  36. <span>{{ formData.bgqdz }}</span>
  37. </td>
  38. <td class="doc-label">变更后</td>
  39. <td class="doc-input">
  40. <el-input v-if="formData.zdmc === 'xmmc'" placeholder="请输入项目名称" v-model="formData.bghdz" :disabled="disabled" />
  41. <el-date-picker
  42. v-if="'xmkssj,xmjssj'.indexOf(formData.zdmc) > -1"
  43. v-model="formData.bghdz"
  44. format="yyyy年MM月dd日"
  45. value-format="yyyy-MM-dd"
  46. placeholder="请选择日期"
  47. style="width: 100%"
  48. :disabled="disabled"
  49. ></el-date-picker>
  50. <avue-select
  51. v-if="formData.zdmc === 'xmfzr'"
  52. v-model="formData.bghdz"
  53. placeholder="请选择"
  54. :dic="fzrList"
  55. style="width: 100%"
  56. :disabled="disabled"
  57. ></avue-select>
  58. </td>
  59. </tr>
  60. <tr>
  61. <td class="doc-label">变更原因说明</td>
  62. <td class="doc-input" colspan="3">
  63. <el-input v-model="formData.bgyy" type="textarea" :rows="3" :disabled="disabled" />
  64. </td>
  65. </tr>
  66. <tr>
  67. <td class="doc-label">变更生效时间</td>
  68. <td class="doc-input" colspan="3">
  69. <el-date-picker
  70. v-model="formData.bgsxsj"
  71. format="yyyy年MM月dd日"
  72. value-format="yyyy-MM-dd"
  73. placeholder="请选择日期"
  74. style="width: 100%"
  75. :disabled="disabled"
  76. ></el-date-picker>
  77. </td>
  78. </tr>
  79. <tr>
  80. <td class="doc-label">附件上传</td>
  81. <td class="doc-input" colspan="3" style="text-align: left;">
  82. <avue-upload
  83. v-if="!disabled"
  84. action="/api/kd-resource/oss/endpoint/put-file"
  85. dataType="object"
  86. :props-http="{
  87. url: 'link',
  88. name: 'originalName',
  89. res: 'data',
  90. }"
  91. type="upload"
  92. v-model="formData.attachment"
  93. style="margin: 14px 0 14px 12px;"
  94. :disabled="disabled"
  95. :uploadPreview="handleUploadPreview"
  96. ></avue-upload>
  97. <div v-else>
  98. <div v-for="(item, index) of formData.attachment" :key="index" style="line-height: 26px; padding: 6px;">
  99. <el-link @click="handleDownFile(item)">{{ item.label }}</el-link>
  100. </div>
  101. </div>
  102. </td>
  103. </tr>
  104. </tbody>
  105. </table>
  106. <div v-if="!disabled" class="btn-wrap" style="text-align: center; margin-top: 30px;">
  107. <el-button style="width: 160px;" @click="handleResetBtn">重置</el-button>
  108. <el-button type="primary" style="width: 160px;" @click="handleSaveBtn">保存</el-button>
  109. </div>
  110. </div>
  111. </template>
  112. <script>
  113. import { getDictionary } from "@/api/system/dictbiz";
  114. import { getList as getTechnicanRosterList } from "@/api/basicResource/technicianRoster";
  115. import { save } from "@/api/projectManage/change";
  116. import moment from "moment";
  117. import projectSelect from "@/components/project-select";
  118. export default {
  119. props: {
  120. projectId: [String, Number],
  121. data: Object,
  122. disabled: {
  123. type: Boolean,
  124. type: false
  125. }
  126. },
  127. components: {
  128. projectSelect
  129. },
  130. data() {
  131. return {
  132. currProjectId: '',
  133. formData: {
  134. attachment: []
  135. },
  136. changeTypeList: [],
  137. loading: false,
  138. selProject: {},
  139. fzrList: [],
  140. };
  141. },
  142. watch: {
  143. "formData.zdmc"(newVal) {
  144. if (newVal == 'xmfzr') {
  145. this.getTechnicanRosterListFunc(moment(this.selProject.xmkssj).format('yyyyMM'));
  146. }
  147. }
  148. },
  149. mounted() {
  150. this.getDictList("xm_biangeng_field", "changeTypeList");
  151. this.currProjectId = this.projectId;
  152. this.formData = {
  153. ...this.data,
  154. };
  155. console.log(this.formData.attachment)
  156. },
  157. methods: {
  158. /**
  159. * 获取人员花名册
  160. */
  161. getTechnicanRosterListFunc(yearAndMonth) {
  162. getTechnicanRosterList(1, 99999, { yearAndMonth }).then(res => {
  163. if (res.data.success) {
  164. this.fzrList = res.data.data.records.map(item => {
  165. return { label: item.name, value: item.id };
  166. });
  167. }
  168. });
  169. },
  170. getDictList(code, toListKey) {
  171. getDictionary({ code }).then((res) => {
  172. this[toListKey] = res.data.data.map((item) => {
  173. return { label: item.dictValue, value: item.dictKey };
  174. });
  175. });
  176. },
  177. handleProjectChange(data) {
  178. this.selProject = data;
  179. },
  180. validForm() {
  181. let errorText = '';
  182. if (!this.currProjectId) {
  183. errorText = '请选择变更的项目';
  184. } else if (!this.formData.zdmc) {
  185. errorText = '请选择变更类型';
  186. } else if (!this.formData.bgyy) {
  187. errorText = '请输入变更原因';
  188. } else if (!this.formData.bgsxsj) {
  189. errorText = '请选择变更生效时间';
  190. } else if (!this.formData.bghdz) {
  191. errorText = '请输入变更后的值';
  192. }
  193. return errorText;
  194. },
  195. handleResetBtn() {
  196. this.formData = {};
  197. },
  198. handleSaveBtn() {
  199. let errorText = this.validForm();
  200. if (errorText) {
  201. this.$message.error(errorText+'!');
  202. return;
  203. }
  204. const params = {
  205. ...this.formData,
  206. bgqdz: this.selProject[this.formData.zdmc],
  207. attachment: JSON.stringify(this.formData.attachment),
  208. xmId: this.currProjectId
  209. };
  210. this.saveData(params);
  211. },
  212. saveData(params) {
  213. save(params).then(({ data }) => {
  214. if (data.code == 200) {
  215. this.$message.success("保存成功!");
  216. this.$emit("success");
  217. }
  218. });
  219. },
  220. handleDownFile(file) {
  221. window.open(file.value);
  222. },
  223. handleUploadPreview (file, column, done) {
  224. window.open(file.url, "_blank");
  225. return;
  226. },
  227. },
  228. };
  229. </script>
  230. <style lang="scss" scoped>
  231. .page-title {
  232. text-align: center;
  233. font-size: 24px;
  234. }
  235. .doc-page {
  236. width: 800px;
  237. margin: 30px auto;
  238. }
  239. table {
  240. width: 100%;
  241. border: 1px solid #333;
  242. }
  243. .doc-label {
  244. text-align: center;
  245. padding: 6px;
  246. color: #777;
  247. font-size: 14px;
  248. width: 15%;
  249. }
  250. .doc-input {
  251. text-align: center;
  252. color: #333;
  253. width: 35%;
  254. }
  255. .el-input__inner {
  256. border: none;
  257. }
  258. tr td {
  259. border: 1px solid #333;
  260. }
  261. </style>