镇农科新增任务模板-选择任务角色

src/views/task_template/edit_admin.vue

@@ -14,12 +14,29 @@
         label-width="120px"
         :rules="formRules"
       >
+      <el-form-item label="任务角色" prop="task_role">
+          <el-select
+            v-model="formData.task_role"
+            clearable
+            :disabled="mode != 'add'"
+            placeholder="请选择任务类型"
+            @change="changeTaskRole"
+          >
+            <el-option
+              v-for="item in taskRoleRow"
+              :key="item.key"
+              :value="item.key"
+              :label="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
         <el-form-item label="任务类型" prop="type">
           <el-select
             v-model="formData.type"
             clearable
             :disabled="mode != 'add'"
-            placeholder="请输入任务类型"
+            placeholder="请选择任务类型"
             @change="changeTaskType"
           >
             <el-option
@@ -36,7 +53,7 @@
               v-model="formData.types"
               clearable
               :disabled="mode != 'add'"
-              placeholder="请输入阶段类型"
+              placeholder="请选择阶段类型"
             >
               <el-option
                 v-for="item in [
@@ -190,6 +207,8 @@ const popupRef = shallowRef<InstanceType<typeof Popup>>();
 const mode = ref("add");
 const datalist = ref([]);
 const route = useRoute();
+const taskType = ref("town_task_type");
+const taskRoleRow = ref([{key:1, value:'负责人'},{key: 2, value: '市场部长'}, {key: 3, value: '服务部长'}])
 
 // 弹窗标题
 const popupTitle = computed(() => {
@@ -206,6 +225,7 @@ const noThreefilter = (id: number) => {
 // 表单数据
 const formData = reactive({
   id: "",
+  task_role: 1,
   task_scheduling: 0,
   company_id: "",
   title: "",
@@ -244,7 +264,7 @@ if (route.query.id) {
   formData.task_scheduling = route.query.id;
 }
 //任务类型接口
-apiTaskTypeList({ type_value: "town_task_type" }).then((res) => {
+apiTaskTypeList({ type_value: taskType.value }).then((res) => {
   datalist.value = res.lists;
 });
 
@@ -257,6 +277,13 @@ const formRules = reactive<any>({
       trigger: ["blur"],
     },
   ],
+  task_role: [
+    {
+      required: true,
+      message: "请选择任务角色",
+      trigger: ["blur"],
+    },
+  ],
   admin_id: [
     {
       required: true,
@@ -267,7 +294,7 @@ const formRules = reactive<any>({
   type: [
     {
       required: true,
-      message: "请输入任务类型",
+      message: "请选择任务类型",
       trigger: ["blur"],
     },
   ],
@@ -281,7 +308,7 @@ const formRules = reactive<any>({
   types: [
     {
       required: true,
-      message: "请输入阶段类型",
+      message: "请选择阶段类型",
       trigger: ["blur"],
     },
   ],
@@ -365,6 +392,26 @@ const changeTaskType = async (e: any) => {
   }
 };
 
+// 选择任务角色
+const changeTaskRole = async (e: any) => {
+  // 负责人
+  if(e == 1) {
+    taskType.value = ''
+  }
+  // 市场部长
+  if(e == 2) {
+    taskType.value = 'town_task_type_marketing_director'
+  }
+  // 服务部长
+  if(e == 3) {
+    taskType.value = 'town_task_type'
+  }
+  apiTaskTypeList({ type_value: taskType.value }).then((res) => {
+  datalist.value = res.lists;
+});
+ 
+};
+
 // 当前点击的地图类型(起,转,终)点
 const mapType = ref("");
 const changeMap = async (e: number) => {