add.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <template>
  2. <view class="content">
  3. <view class="title"> 新增项目 </view>
  4. <uni-forms
  5. :modelValue="formData"
  6. label-position="left"
  7. class="form"
  8. ref="form"
  9. :rules="rules"
  10. >
  11. <uni-forms-item required label="项目名称" name="project_name">
  12. <uni-easyinput
  13. type="text"
  14. v-model="formData.project_name"
  15. class="input"
  16. />
  17. </uni-forms-item>
  18. <uni-forms-item label="项目类别" name="type" required>
  19. <picker
  20. @change="selectChangeType"
  21. :range="typeList"
  22. :range-key="'name'"
  23. >
  24. <view class="select">
  25. {{
  26. formData.type && `${formData.type.name}(${formData.type.code})`
  27. }}
  28. </view>
  29. </picker>
  30. </uni-forms-item>
  31. <uni-forms-item label="流程" name="form">
  32. <picker disabled>
  33. <view class="select">
  34. {{
  35. formData.type && (formData.type.id == 7 ? "研发立项" : "销售立项")
  36. }}
  37. </view>
  38. </picker>
  39. </uni-forms-item>
  40. <uni-forms-item
  41. label="行业名称"
  42. name="industry"
  43. v-show="!formData.type || (formData.type && formData.type.id != 7)"
  44. required
  45. >
  46. <picker
  47. @change="selectChangeIndustry"
  48. :range="industryList"
  49. :range-key="'name'"
  50. >
  51. <view class="select">
  52. {{
  53. formData.industry &&
  54. `${formData.industry.name}(${formData.industry.code})`
  55. }}
  56. </view>
  57. </picker>
  58. </uni-forms-item>
  59. <uni-forms-item
  60. label="项目地区"
  61. name="location"
  62. v-show="!formData.type || (formData.type && formData.type.id != 7)"
  63. >
  64. <picker> <view class="select"></view></picker>
  65. </uni-forms-item>
  66. <uni-forms-item
  67. label="项目简称"
  68. name="name"
  69. v-show="!formData.type || (formData.type && formData.type.id != 7)"
  70. required
  71. >
  72. <uni-easyinput
  73. type="text"
  74. v-model="formData.name"
  75. class="input"
  76. :clearable="false"
  77. @blur="onChangeName"
  78. />
  79. </uni-forms-item>
  80. <uni-forms-item
  81. label="项目期数"
  82. name="version"
  83. v-show="!formData.type || (formData.type && formData.type.id != 7)"
  84. required
  85. >
  86. <picker @change="selectChangeVersion" :range="versionList">
  87. <view class="select">
  88. {{ versionList[this.formData.version - 1] }}
  89. </view>
  90. </picker>
  91. </uni-forms-item>
  92. <uni-forms-item
  93. label="项目编号"
  94. name="code"
  95. v-show="!formData.type || (formData.type && formData.type.id != 7)"
  96. >
  97. <view>
  98. {{
  99. `${formData.code.type}-${formData.code.industry}-${formData.code.location}-${formData.code.name}-${formData.code.version}`
  100. }}
  101. </view>
  102. </uni-forms-item>
  103. </uni-forms>
  104. <view class="group">
  105. <button @click="onHandleSubmit(0)" class="commit">取消</button>
  106. <button @click="onHandleSubmit(1)" type="primary" class="commit">
  107. 确定
  108. </button>
  109. </view>
  110. </view>
  111. </template>
  112. <script>
  113. import { queryProjectType, queryIndustry } from "@/services/project";
  114. import { mapState } from "vuex";
  115. const versionList = ["一期", "二期", "三期", "四期", "五期"];
  116. export default {
  117. data() {
  118. return {
  119. formData: {
  120. project_name: null,
  121. type: null,
  122. flow: null,
  123. industry: null,
  124. location: null,
  125. name: null,
  126. version: null,
  127. code: {
  128. type: "***",
  129. industry: "***",
  130. location: "***",
  131. name: "***",
  132. version: "*",
  133. },
  134. },
  135. rules: {
  136. project_name: {
  137. rules: [
  138. {
  139. required: true,
  140. errorMessage: "请输入项目名称",
  141. },
  142. ],
  143. },
  144. type: {
  145. rules: [
  146. {
  147. required: true,
  148. errorMessage: "请选择项目类别",
  149. },
  150. ],
  151. },
  152. industry: {
  153. rules: [
  154. {
  155. required: this.formData?.type_id != 7,
  156. errorMessage: "请选择行业",
  157. },
  158. ],
  159. },
  160. name: {
  161. rules: [
  162. {
  163. required: this.formData?.type_id != 7,
  164. errorMessage: "请填写项目简称",
  165. },
  166. {
  167. maxLength: 3,
  168. errorMessage: "项目简称不能超过3位",
  169. },
  170. {
  171. validateFunction: function (rule, value, data, callback) {
  172. if (value.match(/[^A-Za-z]/g)) {
  173. callback("项目简称只能是英文字符");
  174. } else {
  175. callback();
  176. }
  177. },
  178. },
  179. ],
  180. },
  181. version: {
  182. rules: [
  183. {
  184. required: this.formdata?.type_id != 7,
  185. errorMessage: "请选择期数",
  186. },
  187. ],
  188. },
  189. },
  190. project_id: 0,
  191. typeList: [],
  192. industryList: [],
  193. versionList,
  194. };
  195. },
  196. computed: {
  197. ...mapState(["currentProject"]),
  198. },
  199. onLoad(options) {
  200. this.project_id = options.project_id;
  201. this.init(options);
  202. },
  203. onReady() {
  204. this.$refs.form.setRules(this.rules);
  205. },
  206. methods: {
  207. onHandleSubmit(value) {
  208. if (value) {
  209. this.$refs.form.validate((err, formData) => {
  210. if (!err) {
  211. console.log("success", formData);
  212. uni.navigateTo({
  213. url: "./list",
  214. });
  215. } else {
  216. console.log(err, formData);
  217. }
  218. });
  219. } else uni.navigateTo({ url: "./list" });
  220. },
  221. async init(options) {
  222. let form = this.formData;
  223. let code = this.formData.code;
  224. let current = this.currentProject;
  225. if (options.project_id) {
  226. form.project_name = current.project_name;
  227. form.type = this.typeList.find(
  228. (item) => item.id == this.currentProject.type_id
  229. );
  230. form.flow = this.typeList.find(
  231. (item) => item.id == this.currentProject.flow_id
  232. );
  233. if (current.type.id != 7) {
  234. form.industry = this.industryList.find(
  235. (item) => item.id == this.currentProject.industry_id
  236. );
  237. form.location = current.location;
  238. form.name = current.name;
  239. form.version = current.version;
  240. code.type = form.type.code;
  241. code.industry = form.industry.code;
  242. code.location = form.location;
  243. code.name = form.name;
  244. code.version = form.version;
  245. }
  246. }
  247. let res;
  248. res = await queryProjectType();
  249. this.typeList = res.data;
  250. res = await queryIndustry();
  251. this.industryList = res.data;
  252. },
  253. binddata(name, value) {
  254. this.$refs.form.setValue(name, value);
  255. },
  256. selectChangeType(e) {
  257. let form = this.formData;
  258. let code = this.formData.code;
  259. form.type = this.typeList[e.target.value];
  260. code.type = form.type.code;
  261. this.binddata("type", e.target.value);
  262. if (form.type.id == 7) {
  263. form.flow = this.typeList.find((item) => item.id == 1);
  264. form.industry = null;
  265. form.location = null;
  266. form.name = null;
  267. form.version = null;
  268. code.industry = "***";
  269. code.location = "***";
  270. code.name = "***";
  271. code.version = "*";
  272. } else form.flow = this.typeList.find((item) => item.id == 4);
  273. },
  274. selectChangeIndustry(e) {
  275. this.formData.industry = this.industryList[e.target.value];
  276. this.formData.code.industry = this.formData.industry.code;
  277. this.binddata("industry", e.target.value);
  278. },
  279. onChangeName(e) {
  280. let name = e.detail.value.toUpperCase();
  281. while (name.length < 3) name += "V";
  282. this.formData.name = name;
  283. this.formData.code.name = name;
  284. },
  285. selectChangeVersion(e) {
  286. this.formData.version = e.target.value + 1;
  287. this.formData.code.version = this.formData.version + "";
  288. this.binddata("version", e.target.value);
  289. },
  290. },
  291. };
  292. </script>
  293. <style lang="less" scoped>
  294. .content {
  295. display: flex;
  296. flex-wrap: wrap;
  297. }
  298. .title {
  299. width: 100%;
  300. padding: 0 20px 20px 20px;
  301. background: #f8f8f8;
  302. font: 24px bold;
  303. }
  304. .form {
  305. margin: 20px 10% 0 10%;
  306. width: 100%;
  307. }
  308. .input {
  309. border: 1px solid #666;
  310. }
  311. .select {
  312. width: 100%;
  313. height: 72rpx;
  314. line-height: 70rpx;
  315. border: 1px solid #666;
  316. padding-left: 20rpx;
  317. }
  318. .group {
  319. width: 100%;
  320. display: flex;
  321. position: fixed;
  322. flex-wrap: wrap;
  323. justify-content: flex-start;
  324. bottom: 0;
  325. left: 0;
  326. .commit {
  327. width: 50%;
  328. border-radius: 0;
  329. margin: inherit;
  330. }
  331. }
  332. </style>